在 js-xlsx
的基础上封装了Export2Excel.js来方便导出数据。
1.安装依赖
npm install xlsx file-saver -S
npm install script-loader -S -D
2.按需加载
由于js-xlsx
体积还是很大的,导出功能也不是一个非常常用的功能,所以使用的时候建议使用懒加载。
在导出事件中加载
import('@/vendor/Export2Excel').then(excel => {
excel.export_json_to_excel({
header: tHeader, //表头 必填
data, //具体数据 必填
filename: 'excel-list', //非必填
autoWidth: true, //非必填
bookType: 'xlsx' //非必填
})
})
参数
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
header | 导出数据的表头 | Array | / | [] |
data | 导出的具体数据 | Array | / | [[]] |
filename | 导出文件名 | String | / | excel-list |
autoWidth | 单元格是否要自适应宽度 | Boolean | true / false | true |
bookType | 导出文件类型 | String | xlsx, csv, txt, more | xlsx |
数据格式说明:
exportExcel(){
// 导出文件需要两个必备数据
// 一个是表头
// 一个是数据本身
const header = [
'id',
'姓名',
'年龄'
]
// 以前一般的数据, 都是数组包裹对象
const students = [
{ id: 1, name: '王大锤', age: 12 },
{ id: 2, name: '陈翠花', age: 13 }
]
// 这个插件需要的不是key:value声明的对象,
// 只需要按照顺序给出的 value 值组成数组即可
const data = [
[1, '王大锤', 12],
[2, '陈翠花', 13]
]
import('@/vendor/Export2Excel').then(excel => {
excel.export_json_to_excel({
// 配置对象
header,
data
})
})
}
添加导出事件:
async exportExcel() {
// 1 加载所有数据
// 将 total 总条数设为每页长度, 加载第一页即可得到所有数据
// 请求获取所有员工数据列表
const { rows } = await getEmployeeList({ page: 1, size: this.page.total })
// 2 根据插件要求转换数据 header / data
// 这两个都可以利用字典进行生成
const dict = {
'姓名': 'username',
'手机号': 'mobile',
'入职日期': 'timeOfEntry',
'聘用形式': 'formOfEmployment',
'转正日期': 'correctionTime',
'工号': 'workNumber',
'部门': 'departmentName'
}
// header 只需要将这个对象的key拿出来组成数组即可
// Object.keys()用来遍历对象的属性。参数都是一个对象,返回一个数组。返回数组的成员都是对象的所有属性名
const header = Object.keys(dict)
// 之前的数据,是一个数组包裹各个员工对象
// 现在要将每个员工对象根据表头的顺序转换为数组,再将所有转换好的员工组成一个新数组
// 使用映射, 将原来数组中的每个对象都映射成一个对应数组, 组成新结果 data
const data = rows.map(user => {
return this.objToArray(user, dict)
})
// 3 调用插件导出数据
import('@/vendor/Export2Excel').then(excel => {
// 拿到引入的包里所有导出的内容
excel.export_json_to_excel({
// 配置对象
header,
data,
filename: '员工信息表'
})
})
},
// 要导出的数据转换为数组
objToArray(userObj, dict) {
// 拿到中文key
const header = Object.keys(dict)
const userArray = []
// 遍历表头,在字典里拿到英文key
header.forEach(cnKey => {
const enKey = dict[cnKey]
// 拿到数据中该英文key对应的属性值
let value = userObj[enKey]
// 如果有时间数据和聘用形式,需要处理
if (enKey === 'timeOfEntry' || enKey === 'correctionTime') {
// 处理后为yyyy-mm-dd 可以在外面包裹一层 new Date 转成时间对象
value = new Date(formatDate(value))
}
if (enKey === 'formOfEmployment') {
// 枚举处理聘用形式 判断当前遍历的对象里id是否与enkey为聘用形式的值一样
const obj = EmployeeEnum.hireType.find(item => item.id === value)
value = obj ? obj.value : '未知'
}
// 属性值放入新数组中
userArray.push(value)
})
// console.log(userArray)
return userArray
}