Vue中如何实现Excel导入导出

目标

在前面员工的添加是一个一个进行的，如果一次性添加多个员工信息，这时候就会很繁琐
因此需要我们开发一个批量导入的功能，将用户的信息存储到 excel 中然后进行批量导入

实现方式

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

在vue-element-admin中，大佬已经封装好了Excel的导入导出方案，我们需要引入借鉴,拷贝 vue-element-admin 中提供的 excel 导入功能组件到自己项目中

讲解

导入相关的代码文件有两个：

• 使用组件：src/views/excel/upload-excel.vue
• 定义组件：src/components/UploadExcel/index.vue // 注册全局组件- 最新版的xlsx包, 导出的方式改变了, 所以我们要修改UploadExcel组件代码

// import XLSX from 'xlsx'// 上面改成下面这样, 按需引入所有然后形成一个对象保存到XLSX变量上import*asXLSXfrom'xlsx'

1. Excel 的导入导出都是依赖于js-xlsx来实现的，
2. 在 js-xlsx的基础上又封装了Export2Excel.js来方便导出数据
3. 由于 Export2Excel不仅依赖js-xlsx还依赖file-saver和script-loader，因此我们需要提前安装- file-saver 用户在客户端保存文件的- script-loader 用于在前端执行一次js脚本文件的

npminstall xlsx file-saver -S
npminstall script-loader -S -D

tips:-S和-D (默认就是–save不写即可, -S -D(是–save-dev)

2. Excel导入

目标

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

分析

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

实现

按接口要求，处理excel导入的数据。处理内容包含：

• 字段中文转英文。excel中读入的是姓名,而后端需要的是username
• 日期处理。从excel中读入的时间是一个 number 值，而后端需要的是标准日期

代码（逻辑很重要，多写几遍）

methods:{// 将表格中的数据进行格式化transExcel(results){const userRelations ={'入职日期':'timeOfEntry','手机号':'mobile','姓名':'username','转正日期':'correctionTime','工号':'workNumber','部门':'departmentName','聘用形式':'formOfEmployment'}return results.map(item=>{const obj ={}// 1. 取出这个对象所有的属性名： ['姓名'， ‘手机号’]// 2. 遍历这个数组，通过 中文名去 userRelations 找对应英文名， 保存值const contentKeys = Object.keys(item)
      contentKeys.forEach(key=>{// 找到对应的英文名const transKey = userRelations[key]// 如果格式化的是时间，需要进行转换if(transKey ==='timeOfEntry'|| transKey ==='correctionTime'){// 表格的天数->转成日期对象const transDate =newDate(formatExcelDate(item[key]))// 再把日期对象转成->'年-月-日'保存到对象属性里给后台
            obj[transKey]=parseTime(transDate,'{yyyy}-{mm}-{dd}')}else{
            obj[transKey]= item[key]}})return obj
    })},// 导入成功以后的回调函数handleSuccess({ results, header }){const arr =this.transExcel(results)
    console.log('转换之后的格式是', arr)}}

**上面用到的日期处理函数在

utils/index.js

中定义如下**

// 把excel文件中的日期格式的内容转回成标准时间exportfunctionformatExcelDate(numb, format ='/'){const time =newDate((numb -25567)*24*3600000-5*60*1000-43*1000-24*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)}

小结 表格读出中文key对象, 如何转换英文key的对象的?

• 准备一个中文key和英文key映射关系的对象, 然后遍历数据里所有中文key拿出来, 换取英文key
• 再准备一个新的对象, 组织英文key和value值

调用接口

// 导入成功以后的回调函数asynchandleSuccess({ results, header }){const arr =this.transExcel(results)const res =awaitimportEmployeeAPI(arr).catch(err=> err)if(!res.success)returnthis.$message.error(res.message)this.$router.back()this.$message.success('操作成功')}

3. Excel导出

分析

1. 把vue-element-admin 中的导出功能，迁移本项目
2. 使用静态数据实现基础的导出功能（先不使用从接口获取的数据）

给导出按钮添加点击事件

<el-button type="success" size="small" @click="downloadExcel">导出excel</el-button>

// 导出excel按钮->点击事件downloadExcel(){import('@/vendor/Export2Excel').then(excel=>{// excel表示导入的模块对象
        excel.export_json_to_excel({header:['姓名','工资'],// 表头 必填data:[['刘备',100],['关羽',500]],// 具体数据 必填filename:'excel-list',// 文件名称autoWidth:true,// 宽度是否自适应bookType:'xlsx'// 生成的文件类型})})}

以上代码表示:

1. 当我们正式点击导出按钮之后，才去加载 vendor 文件夹中的Export2Excel模块
2. import 方法执行完毕返回的是一个 promise 对象，在then方法中我们可以拿到使用的模块对象
3. 重点关注 data 的配置部分，我们发现它需要一个严格的二维数组

Excel导出参数说明：
参数说明类型可选值默认值header导出数据的表头Array/[]data导出的具体数据Array/**[[]]**filename导出文件名String/excel-listautoWidth单元格是否要自适应宽度Booleantrue / falsetruebookType导出文件类型Stringxlsx, csv, txt, morexlsx

Excel导出尝试实现

分析：

1. 从后台重新获取数据（这样才能确保是最新的）
2. 对数据的格式进行转换（后端给的数据字段名都是英文的），以用来做导出

核心在于把后端接口返回的数据转成 Export2Excel 这个插件需要的格式

准备表头header数据
因为接口中返回的数据中的key是英文，而我们期望导出的表头是中文，所以提前准备中文和英文的映射关系

const map ={'id':'编号','password':'密码','mobile':'手机号','username':'姓名','timeOfEntry':'入职日期','formOfEmployment':'聘用形式','correctionTime':'转正日期','workNumber':'工号','departmentName':'部门','staffPhoto':'头像地址'}

具体的表格数据我们需要通过接口从后端获取回来，难点在于如何把后端返回的数据处理成

Export2Excel

插件需求的二维数组格式。

示例

const dataArr =[["13600000001","吕勇锐","1992-08-04","正式","2020-01-01","0001","总裁办"]["13600000002","袁永安","1993-08-04","正式","2020-01-01","0002","总裁办"]]

最终的代码

methods:{// 处理数据的方法transData(rows){// 写代码const map ={'id':'编号','password':'密码','mobile':'手机号','username':'姓名','timeOfEntry':'入职日期','formOfEmployment':'聘用形式','correctionTime':'转正日期','workNumber':'工号','departmentName':'部门','staffPhoto':'头像地址'}const headerKeys = Object.keys(rows[0])const header = headerKeys.map(item=>{return map[item]})const data = rows.map(obj=>{return Object.values(obj)})return{ header, data }}// 导出 ExcelasyncdownloadExcel(){const res =awaitgetEmployeeList()// 调用上面定义的方法，处理返回的数据const excelObj =this.transData(res.data.rows)import('@/vendor/Export2Excel').then(excel=>{// excel表示导入的模块对象
            excel.export_json_to_excel({header: excelObj.header,// 表头 必填data: excelObj.data,// 具体数据 必填filename:'员工列表',// 文件名称autoWidth:true,// 宽度是否自适应bookType:'xlsx'// 生成的文件类型})})},}

优化处理方法：数据顺序对应

transData(rows){// 考虑顺序 (页面上列保持一致顺序)// 4.0 准备一个列表头中文数组 (8个)const headerArr =['序号','姓名','头像','手机号','工号','聘用形式','部门','入职时间']// 4.1 数据key的映射关系(思路: 遍历上边数组里按照顺序, 取出中文的名字, 但是对应数组值的数组, 要从英文key对象中取出value值, 我要用中文key换到英文key然后去取到值)const myObj ={// 序号可以等遍历的时候直接用索引值, 而不是来自于英文对象里'姓名':'username','头像':'staffPhoto','手机号':'mobile','工号':'workNumber','聘用形式':'formOfEmployment','部门':'departmentName','入职时间':'timeOfEntry'}// 4.2 按照顺序, 形成值的数组 (明确目标->想要数据结构->读代码(每个变量意思)读2-3遍->仿写3-5遍)const resultArr = rows.map((item, index)=>{const valueArr =[]// 值小数组
        headerArr.forEach(zhKey=>{if(zhKey ==='序号'){
            valueArr.push(index +1)}else{const enKey = myObj[zhKey]
            valueArr.push(item[enKey])}})return valueArr
      })return{header: headerArr,data: resultArr }}