导入
使用的是vue-admin-template进行的二次开发,自身就有excel批量导入的功能
注意,excel读入的时候注意时间格式
第一步,把excel的数据从本地硬盘上读出来,解析成js数据
监听的方法
<!-- 在这里使用全局注册的组件,用作excel读取-->
<upload-excel
:on-success="handleSuccess" //用来监听excel的成功的方法
:before-upload="beforeUpload"
/>
第二步,按照接口要求的格式去进行数据格式的调整
重点在于数据的处理(转换)
async handleSuccess({ results, header }) {
try {
console.log('从当前excel文件中读出的内容是', results)
// results: [{入职日期: 44502, 姓名:xxxx}]
// 目标:
// results: [{timeOfEntry: 44502, username:xxxx}]
const arr = this.transExcelHander(results)
console.log('转换之后的格式是', arr)
// 调用上传的接口,
const res = await importEmployeeAPI(arr)
console.log('调用上传的接口', res)
// 上传成功之后,回去刚才的页面
this.$router.back()
this.$message.success('操作成功')
} catch (err) {
this.$message.error(err.message)
}
},
transExcelHander(results) {
const userRelations = {
'入职日期': 'timeOfEntry',
'手机号': 'mobile',
'姓名': 'username',
'转正日期': 'correctionTime',
'工号': 'workNumber',
'部门': 'departmentName',
'聘用形式': 'formOfEmployment'
}
// 先用map方法遍历出所有的属性名
return results.map(item => {
// 取出对象所有的属性名组成一个数组
// Object.keys(item) ===> ['入职时间','姓名']
// Object.keys可以取出对象里的所有的key
// 设置一个空对象
const res = {}
// 遍历找出userRelations与key 的值相等的
Object.keys(item).forEach(key => {
const newKey = userRelations[key]
// 判断看看新的key有没有是入职时间和转正时间的,如果有就需要进行时间格式的转化
if (newKey === 'timeOfEntry' || newKey === 'correctionTime') {
// 特殊计算
res[newKey] = new Date(formatExcelDate(item[key]))
} else {
res[newKey] = item[key]
}
})
return res
})
}
导出
下载第三方包npm install file-saver script-loader --save
先调用接口,获取数据
把js数据写入excel文件,写入之前要做格式的转换
第一步准备工具
第二步,数据的转换
transDate(arr) {
const header = {
'id': '编号',
'password': '密码',
'mobile': '手机号',
'username': '姓名',
'timeOfEntry': '入职日期',
'formOfEmployment': '聘用形式',
'correctionTime': '转正日期',
'workNumber': '工号',
'departmentName': '部门',
'staffPhoto': '头像地址'
}
const first = arr[0]
const headers = Object.keys(first).map(item => header[item])
console.log('得到的表头是', headers)
const values = arr.map(obj => {
// 聘用形式的转换,看看obj里面有没有这个属性
if ('formOfEmployment' in obj) {
// obj.formOfEmployment 原来是1,2; 要改成 '正式','非正式'
obj.formOfEmployment = hireType[obj.formOfEmployment]
}
return Object.values(obj)
})
console.log('数据是', values)
return { headers, values }
},
// 点击导出excel表格 ,保存到本地
handleDownloadFn() {
// 懒加载方式的一种
import('@/vendor/Export2Excel').then(async excel => {
// 请求数据之前开启loading
this.isLoading = true
// 1请求数据
const res = await reqGetEmployeeListAPI(this.params)
const { headers, values } = this.transDate(res.rows)
excel.export_json_to_excel({
header: headers, // 导出数据的表头 默认值是[]
data: values, // 导出具体的数据 默认值是[[]]
filename: 'Excel', // 导出的文件名
autoWidth: true, // 导出的内容是否要自适应宽度 默认是true
bookType: 'xlsx' // 导出文件类型 默认值是xlsx
})
// 请求结束之后,关闭loading
this.isLoading = false
})
},
import('@/vendor/Export2Excel')因为这个功能不是常用的功能,它的体积还特别大,和路由的懒加载一样的