vue实现前端导出excel

一、安装依赖

$ `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])) }