Vue导出Excel

Excel 的导入导出都是依赖于js-xlsx来实现的。

在 js-xlsx的基础上又封装了Export2Excel.js来方便导出数据。
使用
由于 Export2Excel不仅依赖js-xlsx还依赖file-saver和script-loader。

所以你先需要安装如下命令：

npm install xlsx file-saver -S
npm install script-loader -S -D

由于js-xlsx体积还是很大的，导出功能也不是一个非常常用的功能，所以使用的时候建议使用懒加载。使用方法如下：

import('@/vendor/Export2Excel').then(excel => {
  excel.export_json_to_excel({
    header: tHeader, //表头 必填
    data, //具体数据 必填
    filename: 'excel-list', //非必填
    autoWidth: true, //非必填
    bookType: 'xlsx' //非必填
  })
})

注意 v3.9.1+

在v3.9.1+以后的版本中移除了对 Blob 的兼容性代码，如果你还需要兼容很低版本的浏览器可以手动引入blob-polyfill进行兼容。

比如你给按钮添加点击事件导出：
此时需要注意data数据的类型 data:[ [],[],[],[] ] , 需要注意对数据的处理

handleDownload() {
            this.downloadLoading = true;
            //表头
            const tHeader = {
                角色Id: "id",
                日期: "created_at",
                角色: "name",
                描述: "description",
            };
            const filterVal = [
                "timestamp",
                "title",
                "type",
                "importance",
                "status",
            ];
            //对数据中需要导出的字段进行遍历形成新的二维数据，然后进行导出
            const data = this.rolesData.map((item) => {
                return [item.id, item.created_at, item.name, item.description];
            });
         
            import("@/vendor/Export2Excel")
                .then((excel) => {
                    excel.export_json_to_excel({
                        header: Object.keys(tHeader), //表头 必填
                        data, //具体数据 必填
                        filename: "role-list", //非必填
                        autoWidth: true, //非必填
                        bookType: "xlsx", //非必填
                    });
                    this.downloadLoading = false;
                })
                .catch((err) => {
                    this.$message({
                        type: "error",
                        message: "导出失败",
                    });
                    this.downloadLoading = false;
                });
        },