在项目开发中,遇到需要导出表格数据到Excel的需求,在搜索之后,找到方法如下:
- 安装插件
npm install -S file-saver xlsx
npm install -D script-loader
- 下载附件(Gitee)附件
- 下载的文件放进项目目录,,为了方便我放在同目录:
- 修改Export2Excel.js文件前几行:
require('script-loader!file-saver')
require('./Blob')
require('script-loader!xlsx/dist/xlsx.core.min')
- vue文件:
html:
<el-button size="mini"
@click="getExcel">导出</el-button>
js:
getExcel() {
require.ensure([], () => {
const { export_json_to_excel } = require('./Export2Excel.js')
// 表头
const tHeader = [
'day',
'total'
]
// 对应字段,与表头一一对应
const filterVal = [
'day',
'total'
]
// 需要导出的数据
const list = this.tableData
const data = this.formatJson(filterVal, list)
// 表头,数据,导出文件名
export_json_to_excel(tHeader, data, '导出列表1')
})
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
},
- 完成