前端生成excel下载和上传下载后端给的数据excel

221 阅读1分钟
import * as XLSX from "xlsx/xlsx.mjs";
 downLoad1() {
      // 创建工作薄
      let workbook = XLSX.utils.book_new();
      // 创建数组对象数据
      let jsa = [
        {
          学生ID: "56656611",
          考试名称: "小学二年级",
          考试总分: "100",
          通过分数: "60",
          用户得分: "89",
          批阅状态: "待批阅",
          阅卷人: "林老师",
        },
        {
          学生ID: "1323646",
          考试名称: "小学3年级",
          考试总分: "101",
          通过分数: "80",
          用户得分: "99",
          批阅状态: "已批阅",
          阅卷人: undefined,
        },
      ];

      // 将数组对象数据装换为xlsx需要的json格式
      var worksheet = XLSX.utils.json_to_sheet(jsa);
      console.log("worksheet", worksheet);

      // 将一个工作表加入到工作薄
      XLSX.utils.book_append_sheet(
        workbook,
        worksheet,
        "这是第一个学生考试信息表"
      );
      XLSX.utils.book_append_sheet(
        workbook,
        worksheet,
        "这是第一个学生考试信息表2"
      );

      // 将excel下载下来
      XLSX.writeFile(workbook, "前端.xlsx");
    },

//excel 下载

    async exportRosters(_, params) {
        console.log(params);
        let url = "https://hrv1-end.yx2.qushiyun.com/web/staff/export?id=" + params.id;
        var xhr = new XMLHttpRequest(); //定义http请求对象
        xhr.open("GET", url, true);
        let token = await JSON.parse(localStorage.getItem("user")).token;
        xhr.setRequestHeader("Authorization", "Bearer " + token);
        xhr.send();
        xhr.responseType = "blob"; // 返回类型blob
        xhr.onload = function () {
            // 定义请求完成的处理函数,请求前也可以增加加载框/禁用下载按钮逻辑
            if (this.status === 200) {
                var blob = this.response;
                console.log(this.response);
                var reader = new FileReader();
                reader.readAsDataURL(blob); // 转换为base64,可以直接放入a标签href
                reader.onload = function (e) {
                    var a = document.createElement("a");
                    a.download = params.name; //自定义下载文件名称
                    a.href = e.target.result;
                    document.body.appendChild(a); // 修复firefox中无法触发click
                    a.click();
                };
            }
        };
    },

//excel 上传.

 <input
       ref="fileInput"
          type="file"
          accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
          @change="importRoster"
          @click="
            (event) => {
              event.target.value = null;
            }
          "
          style="width: 0; height: 0; position: absolute"
        />
 <div class="custom_button no_select" @click="chooseExcel">
          导入花名册
  </div>

//调用input 来选择文件 chooseExcel() { this.$refs.fileInput.click(); }, //获取文件后上传 this.uploadFile({ file: file.target.files[0], type: "staff_xls", })

 uploadFile(_, file) {
    console.log(file);
    let form = new FormData();
    if (file.file && file.type) {
        form.append("file", file.file);
        if (file.type) form.append("type", file.type);
    }else{
        form.append("file", file);
    }
    return axios.post("/web/upload/index?no_sign=1", form, {
        headers: {
            "Content-Type": "multipart/form-data",
        },
    });
},