vue|vue elementUi导出excel表格功能实现 vueelementUi导出excel表格功能实现

vue elementUi导出excel表格功能实现

日常业务中，我们经常遇到excel导出功能，怎么使用呢

Excel 的导入导出都是依赖于js-xlsx来实现的。
在 js-xlsx的基础上又封装了Export2Excel.js来方便导出数据。
安装excel所需依赖和按需加载
由于 Export2Excel不仅依赖js-xlsx还依赖file-saver和script-loader。
所以你先需要安装如下命令：

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

由于js-xlsx体积还是很大的，导出功能也不是一个非常常用的功能，所以使用的时候建议使用懒加载。使用方法如下：

import('@/vendor/Export2Excel').then(excel => { excel.export_json_to_excel({ header: tHeader, //表头必填 data, //具体数据必填 filename: 'excel-list', //非必填 autoWidth: true, //非必填 bookType: 'xlsx' //非必填 }) })

excel导出参数的介绍

vue-element-admin提供了导出的功能模块

参数

参数	说明	类型	可选值	默认值
header	导出数据的表头	Array	/	[]
data	导出的具体数据	Array	/	[[]]
filename	导出文件名	String	/	excel-list
autoWidth	单元格是否要自适应宽度	Boolean	true / false	true
bookType	导出文件类型	String	xlsx, csv, txt, more	xlsx

excel导出基本的结构

我们最重要的一件事，就是把表头和数据进行相应的对应

因为数据中的key是英文，想要导出的表头是中文的话，需要将中文和英文做对应

const headers = { '手机号': 'mobile', '姓名': 'username', '工号': 'workNumber', }

然后，完成导出代码

// 导出excel数据 exportData() { //做操作 // 表头对应关系 const headers = { '姓名': 'username', '手机号': 'mobile', '工号': 'workNumber', } // 懒加载 import('@/vendor/Export2Excel').then(async excel => { const { rows } = await getEmployeeList({ page: 1, size: this.page.total }) const data = https://www.it610.com/article/this.formatJson(headers, rows)excel.export_json_to_excel({ header: Object.keys(headers), data, filename:'员工信息表', autoWidth: true, bookType: 'xlsx'}) }) }, // 该方法负责将数组转化成二维数组 formatJson(headers, rows) { // 首先遍历数组 // [{ username: '张三'},{},{}]=> [[’张三'],[],[]] return rows.map(item => { return Object.keys(headers).map(key => { if (headers[key] === 'timeOfEntry' || headers[key] === 'correctionTime') { return formatDate(item[headers[key]]) // 返回格式化之前的时间 } else if (headers[key] === 'formOfEmployment') { var en = EmployeeEnum.hireType.find(obj => obj.id === item[headers[key]]) return en ? en.value : '未知' } return item[headers[key]] }) // => ["张三", "13811"，"2018","1", "2018", "10002"] }) }

导出时间格式的处理

formatJson(headers, rows) { return rows.map(item => { // item是一个对象{ mobile: 132111,username: '张三'} // ["手机号", "姓名", "入职日期" 。。] return Object.keys(headers).map(key => { // 需要判断字段 if (headers[key] === 'timeOfEntry' || headers[key] === 'correctionTime') { // 格式化日期 return formatDate(item[headers[key]]) } else if (headers[key] === 'formOfEmployment') { const obj = EmployeeEnum.hireType.find(obj => obj.id === item[headers[key]]) return obj ? obj.value : '未知' } return item[headers[key]] }) // ["132", '张三’， ‘’，‘’，‘’d] }) // return rows.map(item => Object.keys(headers).map(key => item[headers[key]])) // 需要处理时间格式问题 }

扩展 复杂表头的导出

当需要导出复杂表头的时候，vue-element-admin同样支持该类操作

vue-element-admin 提供的导出方法中有 multiHeader和merges 的参数

参数	说明	类型	可选值	默认值
multiHeader	复杂表头的部分	Array	/	[[]]
merges	需要合并的部分	Array	/	[]

multiHeader里面是一个二维数组，里面的一个元素是一行表头，假设你想得到一个如图的结构
mutiHeader应该这样定义

const multiHeader = [['姓名', '主要信息', '', '', '', '', '部门']]

multiHeader中的一行表头中的字段的个数需要和真正的列数相等，假设想要跨列，多余的空间需要定义成空串
它主要对应的是标准的表头

const header = ['姓名', '手机号', '入职日期', '聘用形式', '转正日期', '工号', '部门']

如果，我们要实现其合并的效果，需要设定merges选项

const merges = ['A1:A2', 'B1:F1', 'G1:G2']

merges的顺序是没关系的，只要配置这两个属性，就可以导出复杂表头的excel了

exportData() { const headers = { '姓名': 'username', '手机号': 'mobile', '入职日期': 'timeOfEntry', '聘用形式': 'formOfEmployment', '转正日期': 'correctionTime', '工号': 'workNumber', '部门': 'departmentName' } // 导出excel import('@/vendor/Export2Excel').then(async excel => { //excel是引入文件的导出对象 // 导出header从哪里来 // data从哪里来 // 现在没有一个接口获取所有的数据 // 获取员工的接口页码每页条数1001 10000 const { rows } = await getEmployeeList({ page: 1, size: this.page.total }) const data = https://www.it610.com/article/this.formatJson(headers, rows) // 返回的data就是要导出的结构 const multiHeader = [['姓名', '主要信息', '', '', '', '', '部门']] const merges = ['A1:A2', 'B1:F1', 'G1:G2'] excel.export_json_to_excel({ header: Object.keys(headers), data, filename: '员工资料表', multiHeader, // 复杂表头 merges // 合并选项 }) }) }, // 将表头数据和数据进行对应 // [{}]=>[[]] formatJson(headers, rows) { return rows.map(item => { // item是一个对象{ mobile: 132111,username: '张三'} // ["手机号", "姓名", "入职日期" 。。] return Object.keys(headers).map(key => { // 需要判断字段 if (headers[key] === 'timeOfEntry' || headers[key] === 'correctionTime') { // 格式化日期 return formatDate(item[headers[key]]) } else if (headers[key] === 'formOfEmployment') { const obj = EmployeeEnum.hireType.find(obj => obj.id === item[headers[key]]) return obj ? obj.value : '未知' } return item[headers[key]] }) // ["132", '张三’， ‘’，‘’，‘’d] }) // return rows.map(item => Object.keys(headers).map(key => item[headers[key]])) // 需要处理时间格式问题 }

以上就是excel的前端导出处理了.
小结这样我们就可以来做我们的项目了, js高程第四版链接: https://pan.baidu.com/s/18P8k... 可以加公众号获取提取码.
【vue|vue elementUi导出excel表格功能实现】若有不懂的地方，请加q群147936127交流或者vx: ltby52119，谢谢~