vue-element-admin table表格导出(含踩坑)
步骤一：安装插件
npm install xlsx file-saver -S
npm install script-loader -S -D
步骤二：在src新建目录vendor
在vendor新建文件Export2Excel.js
然后将链接中的代码复制到Export2Excel.js
https://github.com/PanJiaChen/vue-element-admin/edit/master/src/vendor/Export2Excel.js
注意：作者用的import 导入，在我的项目中打印XLSX一直是undefined，所以我用了下面的方式
import { saveAs } from 'file-saver'
// import XLSX from 'xlsx'
const XLSX = require('xlsx');
步骤三：在vue中使用
methods: {
exporfFile(){
import('@/vendor/Export2Excel').then(excel => {
// 导出的表头名信息，也就是选中列
const tHeader = [
'序号',
'企业名称',
'区县',
'管理类别',
'行业类别',
'申请类型',
'开始时间',
'结束时间',
'时长',
]
// 导出的表头字段名，需要导出表格字段名
const filterVal = [
'index',
'devcompany',
'name_regiondetail',
'management',
'hyname',
'itemtype',
'start_time',
'end_time',
'time',
]
//导出时如果需要序列，增加序列。
this.tableData1.forEach((item, index) => {
item.index = index + 1
})
const list = this.tableData1
const data = this.formatJson(filterVal, list)
excel.export_json_to_excel({
header: tHeader, //表头 必填
data, //具体数据 必填,字段名必须用data
filename: 'excel-list', //非必填，自定义
autoWidth: true, //非必填
bookType: 'xlsx' //非必填
})
})
},
//处理数据格式将[{}……]处理为@/vendor/Export2Excel需要的[[]……]格式
formatJson(filterVal, jsonData) {
return jsonData.map((v) => filterVal.map((j) => v[j]))
},
}
注意：数组的格式为数组套数组，且tHeader 元素的数量要和data中列的数量一致，且传递时注意，上面对象中橙色的属性data，一定要用'data'这个字段名，否则传递过去是undefined。
data的格式如下：
[
[1, '标题一 'George',111]
[2, '标题二', 'John', 2614,]
[3, '标题三', 'Jennifer', 4787, ]
]
