纯前端使用xlsx实现导出表格

列表数据纯前端使用xlsx实现导出功能

基础写法

let filename = "资产导出.xlsx";
        定义导出数据
        let data = [
          ["第一列",'','','', "第二列", "第三列"],
          [1, 2, 3],
          [true, false, null, "sheetjs"],
          ["foo", "bar", new Date("2014-02-19T14:30Z"), "0.3"],
          ["baz", null, "qux"],
        ];
        // 定义excel文档的名称
        let ws_name = "SheetJS";
        // 初始化一个excel文件
        let wb = XLSX.utils.book_new();
        // 初始化一个excel文档，此时需要传入数据
        let ws = XLSX.utils.aoa_to_sheet(data);
        ws["!merges"] = [{
              s: { c: 1, r: 0 },
              e: { c: 4, r: 0 }
          }]
        // 将文档插入文件并定义名称
        XLSX.utils.book_append_sheet(wb, ws, ws_name);
        // 执行下载
        XLSX.writeFile(wb, filename);

 

动态添加数据

//val即使导出的那一条的数据
exportData(val) {
      let filename = "资产导出.xlsx";
      // 定义导出数据
      let listName = [
        ["列表:"],
        [
          null,
          "序号",
        ],
      ];
      let dataList = [];
      val.assetChangeRecordDetails.map((item, index) => {
        dataList.push([ //将每一行单元格对应参数遍历按表头顺序排列
          null,
          index + 1 + "",
        ]);
      });
      // 定义excel文档的名称
      let ws_name = "导出";
      // 初始化一个excel文件
      let wb = XLSX.utils.book_new();
      // 初始化一个excel文档，此时需要传入数据
      let ws = XLSX.utils.aoa_to_sheet([...listName, ...dataList]);
      ws["!merges"] = [ //c是列，r是行，
        {
          s: { c: 0, r: 0 },
          e: { c: 7, r: 0 },
        }, //即 第一行，A1到A8合并，写出来一眼就能看明白
        {
          s: { c: 1, r: 1 },
          e: { c: 2, r: 1 },
          s: { c: 4, r: 1 },
          e: { c: 5, r: 1 },
        },
        {
          s: { c: 1, r: 2 },
          e: { c: 7, r: 2 },
        },
        {
          s: { c: 0, r: `${dataList.length}` },
          e: { c: 7, r: `${dataList.length}` },
        },
      ];
      ws["!rows"] = [ //单元格高度
        {
          hpx: 30,
        }
      ];
      ws["!cols"] = [ //单个列宽度
        {
          wpx: 80,
        },
      ];
      // 将文档插入文件并定义名称
      XLSX.utils.book_append_sheet(wb, ws, ws_name);
      // 执行下载
      XLSX.writeFile(wb, filename);

    }