vue 或 js 实现 excel表格的导出(笔记)

主要使用了插件 js-xlsx

官方 github：https://github.com/SheetJS/js-xlsx
参考博客 小茗同学的博客园 https://www.cnblogs.com/liuxianan/p/js-excel.html

使用方式 参考 小茗同学的博客园的demo（直接去小茗同学的博客园查看介绍更详细）

demo链接：http://demo.haoji.me/2017/02/08-js-xlsx/
进入demo链接 使用鼠标右键 下载网站源码

原生js可以直接参考上面demo直接使用。为防止网站失效我把demo源码下载到了百度云网盘！
下载demo源码
链接： https://pan.baidu.com/s/1MYqmaMQvf4lshkOzjYFXNQ
提取码：qwv7

vue 则需要安装插件
我的是"xlsx": "^0.16.3"版本

安装
npm install xlsx
导入
import XLSX from "xlsx";

使用参考 代码要自己改一下
// 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
    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",
        bookType: "xlsx",
        bookSST: true,
        type: "binary",
        defaultCellStyle: this.defaultCellStyle,
        cellStyles: true
      };
      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;
    },
    /**
     * 通用的打开下载对话框方法，没有测试过具体兼容性
     * @param url 下载地址，也可以是一个blob对象，必选
     * @param saveName 保存文件名，可选
     */
    openDownloadDialog(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);
    },
    // 点击导出
    exportSpecialExcel() {
      // var data = [
      //   ["主要信息", null, null, "其它信息"], // 特别注意合并的地方后面预留2个null
      //   ["姓名", "性别", "年龄", "注册时间"],
      //   ["张三", "男", 18, new Date()],
      //   ["李四", "女", 22, new Date()]
      // ];
      let xlsxName;
      if (this.deptLevel == 4) {
        xlsxName = "大网格工作量统计分析";
      } else if (this.deptLevel == 5) {
        xlsxName = "中网格工作量统计分析";
      } else if (this.deptLevel == 6) {
        xlsxName = "小网格工作量统计分析";
      }
      let data = [];
      data.push([xlsxName]);
      let time =
        this.$moment(parseInt(this.TablePlanTime)).format("YYYY-MM-DD") +
        "至" +
        this.$moment(parseInt(this.TableDeadline)).format("YYYY-MM-DD");
      data.push(
        ["统计单位：", this.statUnit],
        ["统计人：", this.statUser],
        ["统计日期：", this.nowTime],
        ["统计期间：", time]
      );

      let tableHeader = [
        "序号",
        "网格员名称",
        // null,
        "所属网格",
        "任务总数"
      ];

      this.deptLevel <= 5 ? "" : tableHeader.push("巡检"),
        this.deptLevel != 6 ? tableHeader.push("抽检") : "",
        (tableHeader = tableHeader.concat(["合格", "联合执法", "过期"]));
      data.push(tableHeader);

      if (this.tableData.length) {
        this.tableData.forEach((item, index) => {
          let listArr = [
            index + 1,
            item.userName,
            item.deptName,
            item.allNumber
          ];
          this.deptLevel <= 5 ? "" : listArr.push(item.oneNumber),
            this.deptLevel != 6 ? listArr.push(item.twoNumber) : "",
            (listArr = listArr.concat([
              item.threeNumber,
              item.fourNumber,
              item.fiveNumber
            ]));
          console.log("listArr", listArr);
          data.push(Object.values(listArr));
        });
        data[data.length - 1][0] = "合计";
      }
      console.error("this.tableData", this.tableData);
      var sheet = XLSX.utils.aoa_to_sheet(data);
      sheet["!merges"] = [
        // 设置A1-J1的单元格合并
        {
          s: { r: 0, c: 0 },
          e: { r: 0, c: 9 }
        }
      ];

      sheet["!rows"] = [
        // 设置第一行表格高度
        { hpx: 50 }
      ];
      sheet["!cols"] = [
        // 设置每一列的宽度
        { wpx: 60 },
        { wpx: 100 },
        { wpx: 200 },
        { wpx: 50 },
        { wpx: 50 }
      ];
      this.openDownloadDialog(this.sheet2blob(sheet), xlsxName + ".xlsx");
    },

导出 效果

我本人的页面效果

我本人的页面excel导出效果