在工作中我们可能会遇到将excel文件导入到表单中，或将excel文件导出为excel文件的需求。
背景：
员工添加是一个一个进行的，实际情况中有时候需要我们一次性添加多个员工信息，这个时候就需要我们开发一个批量导入的功能：将事先以excel格式保存的文件批量导入进来。
下面就是我在工作中遇到此需求的解决方法
导入的实现方法
思路： 上传excel文件，把excel文件的内容读出来，还原成最基本的行列结构，按后端的接口要求回传过去
在vue-admin-elemevnt中是有提供文件的导入方案的，我们可以先对其进行分析，找到对应的组件，拷贝自己所需要的组件内容
1，将UploadExcel文件从vue -admin-elemevnt文件中拷贝到自己的项目的src下的components下(注意插件的下载)
2下载插件 npm install xlsx@0.14.1 -S
3在自己的view文件下创建一个improt.vue文件进行测试 同时根据 UploadExcel拷贝自己需要的内容
4配置静态路由，才能访问页面看到效果
1步展示：
2步省略
3步 import.vue的文件内容
<template>
<div>
<upload-excel-component
:on-success="handleSuccess"
:before-upload="beforeUpload"
/>
</div>
</template>
<script>
import UploadExcelComponent from '@/components/UploadExcel/index.vue'
export default {
name: 'UploadExcel',
components: { UploadExcelComponent },
data() {
return {
tableData: [],
tableHeader: []
}
},
methods: {
beforeUpload(file) {
const isLt1M = file.size / 1024 / 1024 < 1
if (isLt1M) {
return true
}
this.$message({
message: 'Please do not upload files larger than 1m in size.',
type: 'warning'
})
return false
},
handleSuccess({ results, header }) {
console.log('读出来的excel的内容是', results, header)
this.tableData = results
this.tableHeader = header
}
}
}
</script>
4配置路由：
{
path: '/import',
component: Layout,
children: [{
path: '',
name: 'import',
component: () => import('@/views/employees/import.vue'),
meta: { title: '导入excel', icon: 'dashboard' }
}]
},
这里excel文件的导入功能基本就完成了，不过对有文件格式的要求还需要进行调整，变动，还需要发请求将数据渲染在页面中， 任重而道远！
对于文件格式的调整： 1 读取功能已完成，然后按后端接口他要求对数据做格式得转换
字段中文转英文。将时间格式转换为 Wed Jun 15 2022 16:13:15 GMT+0800 (中国标准时间) {} 格式
* results excel表格的内容
[ {'姓名'：'小张'， '手机号': '13712345678'} , {.....} ]
// 目标
[ {'username'：'小张'，'mobile': '13712345678'}, {.....} ]
*/
把一个对象数组中的每个对象的属性名，从中文改成英文
// 思路：对于原数组每个对象来说
// （1） 找出所有的中文key
// (2) 得到对应的英文key
transExsel(results, header) {
const mapInfo = {
'入职日期': 'timeOfEntry',
'手机号': 'mobile',
'姓名': 'username',
'转正日期': 'correctionTime',
'工号': 'workNumber',
'部门': 'departmentName',
'聘用形式': 'formOfEmployment'
}
// （1） 找出所有的中文key
const zhKey = Object.keys(results[0])
console.log('zhKey', zhKey)
// zhKey (6) ['姓名', '手机号', '入职日期', '转正日期', '工号', '部门']
// (2) 得到对应的英文key
// results是从excel中读出来的内容
return results.map(item => {
// obj他的key是英文的，value是item的值
const obj = {}
zhKey.forEach(zkey => {
const enkey = mapInfo[zkey]
// 如果日期是44142 这种格式需要转换为2012/04/4 这种格式 formatExcelDate()方法的作用
// new Date() 将2012/04/4这种格式转换为 Wed Jun 15 2022 16:13:15 GMT+0800 (中国标准时间) {} 格式
if (enkey === 'correctionTime' || enkey === 'timeOfEntry') {
obj[enkey] = new Date(formatExcelDate(item[zkey]))
} else {
obj[enkey] = item[zkey]
}
})
console.log('obj', obj)
return obj
})
}
下篇更新导出的方法，敬请期待！！
