vue 中 Excel 的导入导出

一、Excel 导入

1. 初始导入

vue-element-admin 的源代码仓库已经提供了组件源码，通过修改template和style来进行样式更改。组件地址 Excel 导入组件(UploadExcel)
该组件需要配合安装 xlsx 插件，即：

$ npm i xlsx

Excel 导入组件(UploadExcel)源代码34行的 this.onSuccess 的参数获得的结果， 即为{ header, results }对象。header是实际Excel表格的表头信息组成的数组，results是Excel表格内容组成的数组对象（对象中key值为对应表头，value为对应单元格值）。例如：
header:[‘手机号’,‘姓名’,‘入职日期’,‘转正日期’,‘工号’]
results:[{‘手机号’:‘18941134444’,‘姓名’:‘灰太狼’,‘入职日期’:‘2019/3/11’,‘转正日期’:‘2019/9/11’,‘工号’:‘20089’},{‘手机号’:‘18941134445’,‘姓名’:‘红太狼’,‘入职日期’:‘2018/3/11’,‘转正日期’:‘2020/9/11’,‘工号’:‘20090’}]
对应下表

2. 导入后数据处理

表头数据转换成英文再存储。即处理{ header, results }

<upload-excel :on-success="onSuccess" />

// 这个 onSuccess 是父组件的
async onSuccess ({
    header, results }) {
   
      // ! 准备将excel中取到的数据转化成英文的对象
      const userRelations = {
   
        入职日期: 'timeOfEntry',
        手机号: 'mobile',
        姓名: 'username',
        转正日期: 'correctionTime',
        工号: 'workNumber'
      }
      // 数据处理
      // 转换key
      const newArr = results.map(item => {
   
        const arr = {
   }
        Object.keys(item).forEach(key => {
   
          if (
            userRelations[key] === 'timeOfEntry' ||
            userRelations[key] === 'correctionTime'
          ) {
   
            arr[userRelations[key]] = new Date(this.formatDate(item[key], '/'))
            return
          }
          arr[userRelations[key]] = item[key]