vue-element-admin 中存在这个功能 我们只需把这个功能复用到自己的项目中就可以
步骤
1:将vue-element-admin 中的 src/vendor/export2Excel 文件复制到本项目中
2:在项目中安装依赖 npm install file-saver script-loader xlsx --save
npm install file-saver script-loader xlsx --save
3:在导出文件事件的回调中(导出静态资源)
// 按需导入组件 在调用这个事件后导入 节约计算按资源
// import方法执行完毕返回的是一个promise对象,在then方法中我们可以拿到使用的模块对象
import('@/vendor/Export2Excel').then(excel => {
// excel表示导入的模块对象
excel.export_json_to_excel({
// 表头 必填
header: ['姓名', '工资'],
// 具体数据 必填 二维数组
data: [
['刘备', 100],
['关羽', 500]
],
// 文件配置
filename: 'excel-list', // 文件名称
autoWidth: true, // 宽度是否自适应
bookType: 'xlsx' // 生成的文件类型
})
})
4 :发送请求 拿取数据
在 .then的回调函数中发送请求
.then(async excel => {
// 发ajax请求,获取数据
const res = await getEmployee(this.page, this.size)
const list = res.data.rows
console.log('从后端获取的数据', list)
// 省略其他
}
5:对拿取的数据进行操作
拿到的数据一般为数组 包含对象的形式
定义一个函数,在函数中
// 数据处理函数
formatData(list) { // 传入的数据为请求的到的值
//如果返回的数据中表头是英文 我们要中文 先准备好对应的映射关系
const map = {
'id': '编号',
'password': '密码',
'mobile': '手机号',
'username': '姓名',
'timeOfEntry': '入职日期',
'formOfEmployment': '聘用形式',
'correctionTime': '转正日期',
'workNumber': '工号',
'departmentName': '部门',
'staffPhoto': '头像地址'
}
// 根据 导入的模块
// header 用来装表头
let header = []
// 表格的内容 是一个二维数组
let data = []
// 开始代码
// 拿取表头信息 数组内任意一个对象的键值 为表头
const one = list[0]
// 判断 是否存在数据
if (!one) {
// 不存在数据 返回 两个空值
return { header, data }
}
// 拿取对象中所有的键 存放到数组中 并且对照映射拿取中文 作为表头
header = Object.keys(one).map(key => {
return map[key]
})
// 拿取数组中所有对象的值 到data中 每个对象为一个数组 存储到data数组中
data = list.map(obj => {
// 把某些数值代替的数据转换为文字 (如: 性别有0和1代替) 代码中的是不同聘用形式有1或2代替
const key = obj['formOfEmployment'] // 拿到对应的数值 1或2
// 在引用外部的映射进行转换 映射: hireTypEnmu:{1:'正式', '2':'非正式' }
obj['formOfEmployment'] = hireTypEnmu[key]
return Object.values(obj)
})
return { header, data }
},
6: 把得到的数据传入处理函数中 返回表头和内容
// 发送axios 拿取数据 list 为拿到的数据 header, data 为返回的表头以及内容
const { header, data } = this.formatData(list)
// 修改表头和内容 为返回的值
header: header,
data: data,
功能完成