vue中excel导入功能

批量导入信息的时候就需要excel导入功能,可以大大提高工作效率,但是这个功能应该如何实现呢.

1.excel导入思路

1.1前端为主导

        用户上传excel文件,前端将excel文件读取,然后还原成最基本的行列样式,按照后端给出的接口上传给服务器.

 1.2后端为主导

        前端只负责接收excel文件,将文件直接发给后端,后端处理数据.

 2.前端数据处理数据

        因为经常会有excel上传数据的功能,所有现在已经有成熟的解决方案,直接使用便可以.vue-admin-element中已经有了成熟的解决方案,寻找文件夹src/components/UploadExcel/index.vue,

将其复制到自己vue项目中.

<template>   .... </template>  <script> import XLSX from 'xlsx'  export default {   props: {     beforeUpload: Function, // eslint-disable-line     onSuccess: Function// eslint-disable-line   } } </script>

        这个组件使用了XLSX包,需要自行下载.命令为:npm install xlsx -S.

将其定义为组件(全局或者局部随意),在项目中引用该组件并且传入两个属性

<upload-excel-component        :on-success="handleSuccess"        :before-upload="beforeUpload"      />

核心代码

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 }) {       this.tableData = results       this.tableHeader = header     }   }

可以观察下handleSuccess的返回值 header返回值为excel中的标题, results的返回值为excel中的内容.

思路

 调用接口进行excel上传的重点其实是数据的处理，我们需要按照接口的要求，把excel表格中经过插件处理好的数据处理成后端接口要求的格式

/**      * results excel表格的内容       // [           {'姓名'：'小张'， '手机号': '13712345678'}         , {.....}         ]        // 目标       // [ {'username'：'小张'，'mobile': '13712345678'}, {.....} ]      */     // 把一个对象数组中的每个对象的属性名，从中文改成英文     // 思路：对于原数组每个对象来说     //    （1） 找出所有的中文key     //     (2)  得到对应的英文key     //     (3)  拼接一个新对象： 英文key:值     transExcel(results) {       const mapInfo = {         '入职日期': 'timeOfEntry',         '手机号': 'mobile',         '姓名': 'username',         '转正日期': 'correctionTime',         '工号': 'workNumber',         '部门': 'departmentName',         '聘用形式': 'formOfEmployment'       }       return results.map(zhObj => {         const enObj = {}         const zhKeys = Object.keys(zhObj) // ['姓名', '手机号']          zhKeys.forEach(zhKey => {           const enKey = mapInfo[zhKey]            enObj[enKey] = zhObj[zhKey]         })          return enObj       })     }

转换完成后发现问题从excel中读入的日期时间“变形”了

原因:excel内部时间编码与其他文件中的不同

解决

需要借助公式来进行还原。在utils/index.js中定义如下

// 把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) }

所以上方整理格式代码需要更新

import { formatExcelDate } from '@/utils/index.js'  // 更新格式转换函数 transExcel(results) {       const mapInfo = {         '入职日期': 'timeOfEntry',         '手机号': 'mobile',         '姓名': 'username',         '转正日期': 'correctionTime',         '工号': 'workNumber',         '部门': 'departmentName',         '聘用形式': 'formOfEmployment'       }       return results.map(zhObj => {         const enObj = {}         const zhKeys = Object.keys(zhObj) // ['姓名', '手机号']          zhKeys.forEach(zhKey => {           const enKey = mapInfo[zhKey] +          if (enKey === 'timeOfEntry' || enKey === 'correctionTime') {             // 后端需要的日期格式是标准时间 +            enObj[enKey] = new Date(formatExcelDate(zhObj[zhKey]))           } else {             enObj[enKey] = zhObj[zhKey]           }         })          return enObj       })     }

3.数据上传

导入API

封装doImport

  async doImport(data) {       try {         const res = await importEmployee(data)         console.log('importEmployee', res)         this.$message.success('导入成功')          // 页面后退         this.$router.back()       } catch (err) {         console.log('importEmployee', err)         this.$message.error('导入失败')       }     },     //  1. 把数据从excel文件读入到浏览器内存     handleSuccess({ header, results }) {       console.log(header, results)        // 2. 按接口要求 组装数据       const data = this.transExcel(results)       console.log('按接口要求 组装数据', data)       // 3. 调用接口做上传       this.doImport(data)     },