前言

-----为何要使用导入Excel文件功能

在项目开发中，如果需要批量导入多个数据信息时，就需要我们开发批量导入功能，就是将事先以Excel格式保存的文件批量导入进来。

-----导入方式

导入Excel文档功能实现大体有两种方式，一是前端解析后将数据返回给后端，另一种是前端直接返回Excel文档给后台，后台进行处理。具体可结合项目而定。（以下以前端主导介绍）

方式一：前端主导

上传excel文件，把excel文件的内容读出来，还原成最基本的行列结构，按后端的接口要求回传过去。

方式二：后端主导

分析vue-admin-element方案中的导入方案

---1.如何查看vue-admin-element方案

---2.通过路由路径定位到源码位置

在github网址后面输入1s回车，跳转至代码区域

---3.下载所需依赖包XLSX@0.14.1

注意点：这里XLSX需下载0.14.1版本，我们下载时系统会自动按照0.18.5版本下载，会存在下列报错情况；

---4.结合自己项目处理

1）配置路由跳转及点击事件，

2）将UploadExcel组件注册为全局，

ps：强烈推荐使用require.context()批量注册组件，后续引入公共组件都无须手动注册，真的超级方便！！！也避免自己遗忘注册情况，有兴趣可查看我的vus.use注册组件文章，有详细步骤说明juejin.cn/post/708347…

3）准备工作完成后效果

Excel导入--数据处理

Excel导入插件本质：把Excel经过分析转换成js能够识别的常规数据，拿到数据我们可以进行任何操作。

数据格式转换：将Excel解析好的数据经过处理后，转成可以传给接口调用的数据；

字段中文转英文。excel中读入的是姓名,而后端需要的是username;（因此需要转换为后端所需要的数据格式再发送给后端）
日期处理。从excel中读入的时间是一个number值，而后端需要的是标准日期。

故为了方便维护代码，单独封装一个方法来实现这个转换的功能。


/*
      results:tbody 表体
      header：thead 表头
      
      results excel表格的内容
       [
        {'姓名'：'小张'， '手机号': '15694237862'，'工号'：'536221'}，
        {'姓名'：'小王'， '手机号': '13865221458'，'工号'：'538620'},
        ....
      ]

     转换后的内容
     [ 
     {'username'：'小张'，'mobile': '15694237862','workNumber':'536221'}, 
     {'username'：'小王'，'mobile': '13865221458','workNumber':'538620'},
     .....
     ]
    
    把一个对象数组中的每个对象的属性名，从中文改成英文
    思路分析：对于原数组每个对象来说
        （1） 找出所有的中文key
         (2)  得到对应的英文key
         (3)  拼接一个新对象： 英文key:值
 */ 
 
    transExcel(results) {
      const mapInfo = {
        '入职日期': 'timeOfEntry',
        '手机号': 'mobile',
        '姓名': 'username',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName',
        '聘用形式': 'formOfEmployment'
      }
     const newResults = results.map( item => {
     
     //3.定义一个空对象接受转换英文后的新对象
      const obj = {}
      
     //1.获取中文键数组
     const chkey = Object.keys(mapInfo)  
     
     chkey.forEach(key =>{
     
    //2.获取中文键所对应的英文值，遍历中文键数组，找到其每项值所对应的英文键
     const Englishkey = mapInfo[key]
     
     //4.重新定义新对象，obj里面添加英文属性，并进行赋值
     obj[Englishkey] = item[key]
     
     })
    
     return obj
    })
}

Excel导入--数据处理---excel日期时间处理

----为什么要处理时间？

因为从Excel中读入的日期时间会“变形”，如下：

原因：

1、Excel的日期是以1900-1-0开始计算的，既1900-1-1就是1天；

2、js的Date是以 1970-1-1 08:00:00 开始的；

故会存在相差70年情况，那么在转换时就会存在一些特殊情况，所以就需要我们借助公式来进行还原。


// 把excel文件中的日期格式的内容转回成标准时间
// https://blog.csdn.net/qq_15054679/article/details/107712966
export function formatExcelDate(numb, format = '/') {
  const time = new Date((numb - 25567) * 24 * 3600000 - 5 * 60 * 1000 - 43 * 1000 - 24 * 3600000 - 8 * 3600000)
  time.setYear(time.getFullYear())
  const year = time.getFullYear() + ''
  const month = time.getMonth() + 1 + ''
  const date = time.getDate() + ''
  if (format && format.length === 1) {
    return year + format + month + format + date
  }
  return year + (month < 10 ? '0' + month : month) + (date < 10 ? '0' + date : date)
}

更新格式转换函数

//一定要引入formatExcelDate！！！
import { formatExcelDate } from '@/utils/index.js'

// 更新格式转换函数
transExcel(results) {
      const mapInfo = {
        '入职日期': 'timeOfEntry',
        '手机号': 'mobile',
        '姓名': 'username',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName',
        '聘用形式': 'formOfEmployment'
      }
   const newResults = results.map( item => {
        const obj = {}
        const chkey = Object.keys(mapInfo)  
     
     chkey.forEach(key =>{
          const Englishkey = mapInfo[key]
          
          //5.excel时间转换问题formatExcelDate
+          if ( Englishkey === 'timeOfEntry' ||  Englishkey === 'correctionTime') {
            // 后端需要的日期格式是标准时间
+            Obj[Englishkey] = new Date(formatExcelDate(item[key]))
          } else {
           obj[Englishkey] = item[key]
          }
        })

        return enObj
      })
    }

结合vue-admin-element实现导入Excel文件功能及中英数据转换

前言