一、安装依赖
$ `npm install -S xlsx`
$ `npm install -S file-saver`
以上两种合并简写成:$ `npm install -S file-saver xlsx`
$ `npm install -D script-loader`
二、添加js文件
src下创建excel(自定义)文件夹放入Blob.js
和 export2Excel.js
链接:https://pan.baidu.com/s/1Hp66lcrl8nYJUTSUyXY5hA
提取码:w1fz
三、修改配置文件
找自己项目中resolve的alias中加入
有的是在build下的 webpack.base/conf.js,我的是在项目下的idea.config.js(Ant-Design-Pro)
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'config': resolve('config'),
'@': resolve('src'),
'@views': resolve('src/views'),
'@comp': resolve('src/components'),
'@core': resolve('src/core'),
'@utils': resolve('src/utils'),
'@entry': resolve('src/entry'),
'@router': resolve('src/router'),
'@store': resolve('src/store'),
'excel': path.resolve(__dirname, '../src/excel'), //新增这一行
}
},
四、代码实现
//按钮
<a-button @click="downloadExcel" type="primary" icon="download">导出</a-button>
//methods下
//点击事件
downloadExcel() {
this.export2Excel()
},
//数据写入excel
export2Excel() {
require.ensure([], () => {
const { export_json_to_excel } = require('@/excel/export2Excel') //这里必须使用绝对路径,使用@/+存放export2Excel的路径
const tHeader = ['列表1', '列表2', '列表3'] // 导出的表头名信息
const filterVal = ['name1', 'name2', 'name3'] // 导出的表头字段名,需要导出表格字段名,根据后台返回的数据
const list = this.excelData //根据后台返回的数据源
const data = this.formatJson(filterVal, list)
export_json_to_excel(tHeader, data, `游戏列表-${dayjs().format('YYYY-MM-DD')}`) // 导出的表格名称,根据需要自己命名 //import * as dayjs from 'dayjs'引入事件转换或(new Date()).format('YYYY-MM-DD'))
})
},
//格式转换
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
}