JS 前端导出Excel

先通过 npm 下载 Excel 

npm install xlsx -S

在需要数据的页面进行引入

import * as XLSX from "xlsx";

以下这俩个方法直接复制粘贴，不需要改动.

//导出excel相关函数
    sheet2blob(sheet, sheetName) {
      //将文件转换为二进制文件
      sheetName = sheetName || "sheet1";
      var workbook = {
        SheetNames: [sheetName],
        Sheets: {},
      };
      workbook.Sheets[sheetName] = sheet;
      // 生成excel的配置项
      var wopts = {
        bookType: "xlsx", // 要生成的文件类型
        bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
        type: "binary",
      };
      var wbout = XLSX.write(workbook, wopts);
      var blob = new Blob([s2ab(wbout)], { type: "application/octet-stream" });
      // 字符串转ArrayBuffer
      function s2ab(s) {
        var buf = new ArrayBuffer(s.length);
        var view = new Uint8Array(buf);
        for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
        return buf;
      }
      return blob;
    },

    openDownloadXLSXDialog(url, saveName) {
      //下载模板文件
      if (typeof url == "object" && url instanceof Blob) {
        url = URL.createObjectURL(url); // 创建blob地址
      }

      var aLink = document.createElement("a");
      aLink.href = url;
      aLink.download = saveName || ""; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
      var event;
      if (window.MouseEvent) event = new MouseEvent("click");
      else {
        event = document.createEvent("MouseEvents");
        event.initMouseEvent(
          "click",
          true,
          false,
          window,
          0,
          0,
          0,
          0,
          0,
          false,
          false,
          false,
          false,
          0,
          null
        );
      }
      aLink.dispatchEvent(event);
    },

这里是处理和调用上面俩个方法的地方

//导出选课名单
    exportSemesterStudent() {
      这里调用后端的接口(丢入传参) .then((res) => {
      for (var j in res.data) {
        const data = [
          [ "这里写入表头名称。例如：XXX"],
          ["这里写对应的数据，例如：YYY"],
          ["如果有多组数据就写多个多维数组就行，例如：ZZZ"],
        ];

        //如果是动态数据可以采用以下方法,data保留表头，其他的数据转化成数组PUSH进去就行。例如：
        var array = ['这里写纯数组，只能支持：[1,2,3]，类似的数字。数组内只能数纯数据，不能是对象以及其他。解析不出来 ']
        data,push(array)

        //可以通过 let array = Object.values( "这里放后端返回的数组对象。例如：[ { a:A,b:B } ] " ); 
        //这样可以拿到 value值形成一个数组，最终push 进去 data

        var sheet = XLSX.utils.aoa_to_sheet(data);
        var blob = this.sheet2blob(sheet, '这里是Excel表格内部的内页的名字');
        this.openDownloadXLSXDialog(blob, '这里写Excel表格的名字.xlsx');
      }
    }) .catch(() => {
      this.$message.error("导出表格失败");
    });
    },

以上代码仔细观看备注，全程无BUG。安全可靠可用