Vue导出Excel

2021-12-15 15:33:12 阅读：147 来源： 互联网

标签：xlsx Vue 必填 Excel excel 导出 js item

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;
                });
        },

标签：xlsx,Vue,必填,Excel,excel,导出,js,item
来源： https://blog.csdn.net/weixin_43240445/article/details/121951313

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue导出Excel