使用 vue 实现自定义导出表格数据至 Excel 表格中，需要用到的组件有script-loader，xlsx，file-saver以及Blob.js和Export2Excel.js。
1.安装必须的组件
先安装script-loader，xlsx，file-saver：
npm i script-loader -S npm i xlsx -S npm i file-saver -S
加入导出文件需要用到的js文件：
https://github.com/ZJW0215/staticResource
2.自定义数据导出实现
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]))
},
- 我找到一些文章，但是上面有好多是直接导出当前已渲染的表格中的数据，并不能够自定义导出所有数据，本例可实现自定义导出数据。
- 单独的设置一个字段来实现导出，这样才不会对原本渲染在页面上的数据造成污染
- 对于需要进行处理后再进行导出的数据，最好应该重新定义一个字段，这样就不会改变原有的数据，可以直接导出的数据，就直接将字段放入filterValue数组里就可以了
