步骤一:安装插件
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, ]
]