纯前端使用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);

    }

纯前端使用xlsx实现导出表格的相关教程结束。