vue中导出Excel表格的实现代码

2020-06-16 05:58:01易采站长站整理

this.http(
this.ApiSetting.orderExport,
data
).then((res) => {
// handleDataList这里可以对导出的数据根据需求做下处理
const handleDataList = res.data.list
for (let i in res.data.list) {
handleDataList[i].amount = res.data.list[i].amount * 100
handleDataList[i].fee = res.data.list[i].fee + '%'
}
if (res.data.list.length > 0) {
require.ensure([], () => {
/* eslint-disable */
// 这里的径路要修改正确
const { export_json_to_excel } = require('../../vendor/Export2Excel')
/* eslint-enable */
// 导出的表头
const tHeader = ['手机号码', '用户姓名', '交易金额', '手续费'] // 导出表头要对应的数据
const filterVal = ['phoneNo', 'userName', 'amount', 'fee'] // 如果对导出的数据没有可处理的需求,把下面的handleDataList换成res.data.list即可,删掉上面相应的代码
const data = this.formatJson(filterVal, handleDataList)
// this.DefaultData.formatLongDate.getNow()自己写的一个获取当前时间,方便查找导出后的文件。根据需求自行可处理。
export_json_to_excel(tHeader, data, '订单查询列表-' + this.DefaultData.formatLongDate.getNow())
this.$message({
message: '导出成功',
duration: 2000,
type: 'success'
})
})
} else {
this.$message({
message: '数据出錯,请联系管理员',
duration: 2000,
type: 'warning'
})
}
loading.close()
}, error => {
console.log(error)
loading.close()
})
}

在需要导出功能的页面加入上面三个方法,修改好需要注意的事项,导出Excel表格就ok了。