ElementUI表格数据导出为Excel

记录ElementUI表格数据导出为Excel的步骤：

1.　　安装依赖

npm install --save xlsx file-saver
npm install -D script-loader

可能会报错，提示：

　　found 72 vulnerabilities (68 low, 1 moderate, 3 high)
　　run `npm audit fix` to fix them, or `npm audit` for details

按照提示尝试修复就好了。

2.　　下载Blob.js、export2Excel.js

度盘地址：https://pan.baidu.com/s/1Axo_kC0WatR3hnFK-JSfOA 　　提取码：a6u9

在src下创建excel文件夹，将下载的文件拷贝进去。

3.　　功能代码

添加导出按钮

1 <el-button type="primary" size="small" @click="downloadExcel">导出</el-button>

在methods中写对应函数

 1 downloadExcel() {
 2       this.$confirm('将导出为excel文件，确认导出?', '提示', {
 3         confirmButtonText: '确定',
 4         cancelButtonText: '取消',
 5         type: 'warning'
 6       }).then(() => {
 7         this.excelData = this.tableData
 8         this.export2Excel()
 9       }).catch(() => {
10 
11       })
12     },
13     // 数据写入excel
14     export2Excel() {
15       var that = this
16       require.ensure([], () => {
17         const { export_json_to_excel } = require('@/excel/export2Excel') // 这里必须使用绝对路径，使用@/+存放export2Excel的路径
18         const tHeader = ['单体名称', '检测日期', '所属项目', '检测人员', '检测机构', '地区'] // 导出的excel的表头字段
19         const filterVal = ['name', 'planCheckDate', 'projectName', 'checkWorker', 'companyName', 'regionName'] // 对象属性，对应于tHeader
20         const list = that.excelData //json数组对象，接口返回的数据
21         const data = that.formatJson(filterVal, list)
22         export_json_to_excel(tHeader, data, '检测单体数据')// 导出的表格名称
23       })
24     },
25     // 格式转换，直接复制即可
26     formatJson(filterVal, jsonData) {
27       return jsonData.map(v => filterVal.map(j => v[j]))
28     },

测试可用

其他问题暂不清楚，参考来源：https://blog.csdn.net/qq_26242601/article/details/91874261

ElementUI表格数据导出为Excel

推荐阅读