vue导出Excel表

34次阅读

共计 1035 个字符，预计需要花费 3 分钟才能阅读完成。

使用 vue 导出表格数据至 Excel 表格中，自定义导出的 excel 表格数据

先安装 script-loader，xlsx，file-saver；然后将主要的 js 导出文件加入

npm i script-loader -S
npm i xlsx -S
npm i file-saver -S

excel 所需的 js 文件

我找到一些文章，但是上面有好多是直接导出当前已渲染的表格中的数据，并不能够自定义导出所有数据

exportExcel() {require.ensure([], () => {const { export_json_to_excel} = require('@/excel/Export2Excel');
    /* 设置 Excel 的表格第一行的标题 */
    const tHeader = ['ID','店铺名称','公司'];
    /* filterValue 里的值是 tableData 里对象的属性 */
    const filterValue = ['id','shopname','companyname'];
    
    const list = this.exportList;
    /* 对要导出的数据进行加工，自定义，filterValue 中的字段名就是导出到 excel 中对应的数据键值 */
    for(let i = 0; i < list.length; i++) {
        /* 如要导出名字，则自定义 name 属性 */
        list[i].name = list[i].lastname + '对的';
    }
    /* 把 data 里的 list 存到 list */
    const data = this.formatJson(filterValue, list);
    /* 最后一个项为导出的 excel 名字，可以随便定义 */
    export_json_to_excel(tHeader, data, '列表');
  });
},
formatJson(filterVal, jsonData) {return jsonData.map(v => filterVal.map(j => v[j]))
},