Export2Excel -- 实现导出excel文档(Vue)

最新推荐文章于 2024-08-18 16:07:53 发布

爱笑的人呐

最新推荐文章于 2024-08-18 16:07:53 发布

阅读量4.6k

点赞数 3

分类专栏： vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_44756169/article/details/104791751

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Export2Excel

步骤-1：安装依赖

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

步骤-2：新建文件夹，引入所需js文件

文件链接地址：Blob.js、Export2Excel.js
文件提取码： pur3

如果出现报错：

解决方法：
查看Export2Excel.js文件中，引入的Blob.js路径是否正确；

步骤-3：页面方法调用

exportExcel() {
      require.ensure([], () => {
        // ！！！导入的Export2Excel.js, 根据自身项目的创建路径为准
        const { export_json_to_excel } = require("../../assets/js/Export2Excel");
        const tHeader = ["日期", "户名", "转账金额", "提现手续费"];  //表头名
        const filterVal = ["time", "rcltnm", "aclamt ", "feeamt"];  //表头字段
        const list = this.tableData;  //表格内容
        //formatJson方法，用于格式转换直接复制
        const data = this.formatJson(filterVal, list);  
        export_json_to_excel(tHeader, data, "导入的表格名称");
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },

扩展：

使用原生方法，实现导出excel方法：

如果数据源是接口返回的数据时，最好做个兜底处理，接口请求成功后，再执行下面的代码操作

        const data = res; // res为表格内容数据源
        const a = document.createElement("a");
        const blob = new Blod([data]);
        const blobUrl = window.URL.createObjectURL(blob);
        a.style.display = 'none';
        a.download = '下载文件名称';
        a.href = blobUrl;
        a.click();