一. 说明:

在表格中查询到了我们需要的数据，希望用他们生成excel文件，保存在本地。

二. 思路:

  1.    ![image.png](https://cdn.nlark.com/yuque/0/2021/png/21762447/1625070063146-dd014829-d564-44d9-ba7a-f998a9ccea44.png#clientId=uc191f243-794f-4&from=paste&height=247&id=u7ac8243d&margin=%5Bobject%20Object%5D&name=image.png&originHeight=247&originWidth=605&originalType=binary&ratio=1&size=28197&status=done&style=none&taskId=ud875885c-193d-403b-8d64-9c650a1c9cb&width=605)

取回数据,保存excel文件

三. 步骤:

1. 安装:

  1.     Export2Excel依赖的包有js-xlsx、file-saver和script-loader,也就是说，在项目跑起来之前要安装依赖
  1. npm install file-saver script-loader xlsx --save

2. 总思路:

1. 从后台重新获取数据（这样才能确保是最新的）

2. 对数据的格式进行转换（后端给的数据字段名都是英文的），以用来做

导出

3. 操作:

1. 给按钮添加点击事件:

image.png

2.代码如下:

  1. import('@/vendor/Export2Excel').then(excel => {})  这个是固定的

a) 点击事件: 这个部分里面的发请求和处理数据我也不知道是不是固

定的套路

  1.   hExport() {
  2.       import('@/vendor/Export2Excel').then(async excel => {
  3.         // 发送请求
  4.         const res = await getEmployee(this.page, this.size)
  5.         const list = res.data.rows
  6.         console.log('从后端返回的数据', list)
  7.         // const { header, data }这个的写法相当于就是  const obj = {header, data}结构赋值嘛,就相当于少些了obj
  8.         const { header, data } = this.formatDate(list)
  9.         // excel 表示导入的模块对象
  10.         console.log(header, data)
  12.         // excel表示导入的模块对象
  13.         console.log(excel)
  14.         excel.export_json_to_excel({
  15.           // header: ['姓名', '工资'], // 表头 必填
  16.           // data: [
  17.           //   ['刘备', 100],
  18.           //   ['关羽', 500]
  19.           // ], // 具体数据 必填
  20.           header: header,
  21.           data: data,
  22.           filename: 'excel-list', // 文件名称
  23.           autoWidth: true, // 宽度是否自适应
  24.           bookType: 'xlsx' // 生成的文件类型
  25.         })
  26.       })
  27.     },

b) 处理后端返回的数据(后端给的数据字段名都是英文的)转成中文

  1.  // 把后端返回的数据格式化了
  2.     formatDate(list) {
  3.      // 准备表头header数据
  4.       const map = {
  5.         'id': '编号',
  6.         'password': '密码',
  7.         'mobile': '手机号',
  8.         'username': '姓名',
  9.         'timeOfEntry': '入职日期',
  10.         'formOfEmployment': '聘用形式',
  11.         'correctionTime': '转正日期',
  12.         'workNumber': '工号',
  13.         'departmentName': '部门',
  14.         'staffPhoto': '头像地址'
  15.       }
  16.       console.log(list)
  17.       let header = []
  18.       let data = []
  19.       // 开始代码
  20.       // 找到一个元素
  21.       const one = list[0] // 这个打印出来的就是:  {id:'12232432',mobile:'13833333333',username:'管理员',password:'43edf45'}
  22.       if (!one) {
  23.         // 如果找不到 就返回一个空的出去
  24.         return { header, data }
  25.       }
  26.       // 表头:  需要的是key值,就是 header = ['id','mobile','username',....]
  27.       header = Object.keys(one).map(key => {
  28.         // 这一步是把刚刚找出来的['id','mobile','username',....] 转成中文,map[key]的map是上面的const map
  29.         return map[key]
  30.       })
  32.       // data把list总的每一个对象转成 对应的value数组,导出使需要的是值,就是['6463c','13800000001','管理员'],这样的
  33.       data = list.map(obj => {
  34.         // 把 obj['formOfEmployment'] : 1 ,2  转成  '正式','非正式'
  35.         const key = obj['formOfEmployment'] // 打印出来是1,2
  36.         // hireTypeEnmu这个是格式化 就是把1,2 转换成'正式','非正式'
  37.         obj['formOfEmployment'] = hireTypeEnmu[key] // hireTypeEnmu:{1:'正式',2:'非正式'}
  38.         return Object.values(obj) // 返回的是值
  39.       })
  40.       return { header, data }
  41.     },

这里面注释我写的很清楚了,主要就是处理表头和内容部分,明天再来做具体的总结

image.png

转成下面的样子

image.png

4. 小结:

1. 表头header数据: 把英文转成中文

2. 表格data数据:

  1.               具体的表格数据我们需要通过接口从后端获取回来，难点在于如何把后端返回的数据处理成Export2Excel插件需求的二维数组格式。

示例:

  1.             ![image.png](https://cdn.nlark.com/yuque/0/2021/png/21762447/1625071516922-e71448eb-6586-41e7-a20b-fb9866aa2925.png#clientId=uc191f243-794f-4&from=paste&height=160&id=u516bf22f&margin=%5Bobject%20Object%5D&name=image.png&originHeight=160&originWidth=508&originalType=binary&ratio=1&size=9261&status=done&style=none&taskId=u71a037cf-af12-4490-9c05-56a7536ba35&width=508)


四: Excel导出参数说明

image.png