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