背景：现在的项目需要做这个功能，之前没有处理过，记录下来方便查看。
第一步：安装依赖包
npm install file-saver
npm install xlsx
npm install script-loader
第二步：新建js文件夹，也可以命名为excel，用于存放Blob.js和Export2Excel.js两个js文件
image.png
第三步：具体的使用方法
主要是两个方法，之前我看的是别人的方法（方法二），但是因为vue-cli版本不同无法识别require.ensure的写法，所以自己琢磨了下改为方法一，也能实现。
方法一：表格数据序号返回，需要自己手动添加序号
exportToExcel() {
//手动添加序号至表格中
const dataTable = JSON.parse(JSON.stringify(this.accountAllTable))
for (let i = 0; i < dataTable.length; i++) {
dataTable[i].index = i + 1;
}
const { export_json_to_excel } = require('./js/Export2Excel');
const tHeader = [
'序号',
'账户ID',
'账户名',
'客户名称',
'客户类型',
'国家地区',
'区号',
'手机号码',
'邮箱',
'账号类型',
'状态',
'注册时间'
];
const filterVal = [
'index',
'accountId',
'accountName',
'customerName',
'accounType',
'country',
'region',
'mobile',
'email',
'accountPortfolioTypeDest',
'status',
'createDate'
];
const data = this.formatJson(filterVal, dataTable);
export_json_to_excel(tHeader, data, '账户信息列表');
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]));
}
方法二：
exportToExcel() {
//excel数据导出
require.ensure([], () => {
const {
export_json_to_excel
} = require('../../assets/js/Export2Excel');
const tHeader = ['序号','省份', '投资总额', '收益总额', '主要投资项目','投资周期', '投资人数', '投资年变化率','备注'];
const filterVal = ['index','provinces', 'orderMoney', 'incomeMoney', 'payType','orderPeriod', 'orderPersonConunt', 'orderYearRate', 'remarks'];
const list = this.tableData;
const data = this.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, '列表excel');
})
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
}
第四步：
在html页面使用：添加exportToExcel()方法
html代码.png
以上就是全部步骤~~
