- 首先安装依赖:
cnpm i -S file-saver xlsx // or: npm i -S file-saver xlsx
cnpm i -D script-loader // or: npm i -D script-loader
- 将 Export2Excel.js 及 Blob.js 放至项目相关目录下:
/src/vendor/
tips:
如文件夹名称不为vendor, 则需修改 Export2Excel.js 里的文件引入路径
require('script-loader!@/vendor/Blob') //修改为你的自定义路径
- 在页面上使用:
<button @click="exportData">导出数据<button>
//导出数据
exportData(){
require.ensure([], () => {
const { export_json_to_excel } = require('@/vendor/Export2Excel');
//要输出的表头
const tHeader = ['用户手机号', '微信号', '状态'];
//表头对应的内容, 会从下行定义的 list 里去找相应的数据
const filterVal = ['phone','wechatNum','status'];
//数据来源
const list = this.tableData;
const data = this.formatJson(filterVal, list);
//fileName: 要导出的表格名称
export_json_to_excel(tHeader, data, 'fileName');
})
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
}
//导出数据end
tips:
声明一个新的变量存放并修改要导出的数据,可以避免把如"状态: 1代表正常, 0代表封禁",这样不直观的原始数据直接暴露给用户;
eg:
1. 声明变量存放数据
//必须深拷贝,不能直接赋值。否则只是拷贝了存放在内存的路径指针,修改的话会直接影响原始数据
let exportDataList = [...this.exportDataList.map(item => {
return { ...item }
})];
// or
//当数据含有function、undefined、date等类型的时候不适用
let exportDataList = JSON.parse(JSON.stringify(this.tableData));
上面的例子列举了两种较为简单便(biàn)宜的深拷贝方法, 但有其不适用性, 还是推荐各位自行找寻兼容性更好的方式;
2. 简单来个循环, 修改要导出的数据
let length = exportDataList.length;
for(let i = 0; i < length; i++) {
switch(exportDataList[i].payType) {
case 0:
exportDataList[i].payType = '微信支付';
break;
case 1:
exportDataList[i].payType = '支付宝';
break;
default:
exportDataList[i].payType = '默认方式支付';
}
};
const list = exportDataList;
把修改后的 exportDataList 赋值给第三步里声明的 list 即可
网友评论