实现导出excel 文件

vue-element-admin 中存在这个功能 我们只需把这个功能复用到自己的项目中就可以

步骤

1:将vue-element-admin 中的 src/vendor/export2Excel 文件复制到本项目中

2:在项目中安装依赖  npm install file-saver script-loader xlsx --save

      npm install file-saver script-loader xlsx --save

3:在导出文件事件的回调中（导出静态资源）

// 按需导入组件  在调用这个事件后导入  节约计算按资源
// import方法执行完毕返回的是一个promise对象，在then方法中我们可以拿到使用的模块对象

import('@/vendor/Export2Excel').then(excel => {
  // excel表示导入的模块对象

  excel.export_json_to_excel({

// 表头 必填
    header: ['姓名', '工资'], 
 // 具体数据 必填  二维数组
    data: [
      ['刘备', 100],
      ['关羽', 500]
    ],

// 文件配置

    filename: 'excel-list', // 文件名称
    autoWidth: true, // 宽度是否自适应
    bookType: 'xlsx' // 生成的文件类型
  })
})

4 :发送请求 拿取数据

在  .then的回调函数中发送请求 

.then(async excel => {
        // 发ajax请求，获取数据
        const res = await getEmployee(this.page, this.size)
        const list = res.data.rows
        console.log('从后端获取的数据', list)
// 省略其他
}

5：对拿取的数据进行操作 

拿到的数据一般为数组 包含对象的形式

定义一个函数，在函数中

// 数据处理函数
formatData(list) {  // 传入的数据为请求的到的值

  //如果返回的数据中表头是英文 我们要中文  先准备好对应的映射关系
      const map = {
        'id': '编号',
        'password': '密码',
        'mobile': '手机号',
        'username': '姓名',
        'timeOfEntry': '入职日期',
        'formOfEmployment': '聘用形式',
        'correctionTime': '转正日期',
        'workNumber': '工号',
        'departmentName': '部门',
        'staffPhoto': '头像地址'
      }
  
// 根据  导入的模块 
   // header  用来装表头
      let header = []
   //  表格的内容 是一个二维数组
      let data = []


      // 开始代码
    
// 拿取表头信息 数组内任意一个对象的键值 为表头
      const one = list[0]

// 判断 是否存在数据

      if (!one) {
// 不存在数据 返回 两个空值
        return { header, data }
      }
// 拿取对象中所有的键 存放到数组中 并且对照映射拿取中文 作为表头
      header = Object.keys(one).map(key => {
        return map[key]
      })

// 拿取数组中所有对象的值 到data中 每个对象为一个数组 存储到data数组中     

      data = list.map(obj => {

 // 把某些数值代替的数据转换为文字   (如: 性别有0和1代替) 代码中的是不同聘用形式有1或2代替
        const key = obj['formOfEmployment'] // 拿到对应的数值 1或2
 // 在引用外部的映射进行转换   映射:  hireTypEnmu:{1:'正式', '2':'非正式' }
        obj['formOfEmployment'] = hireTypEnmu[key] 

        return Object.values(obj)
      })

      return { header, data }
    },

 6:  把得到的数据传入处理函数中 返回表头和内容

// 发送axios 拿取数据 list 为拿到的数据   header, data 为返回的表头以及内容
const { header, data } = this.formatData(list)

// 修改表头和内容 为返回的值

 header: header, 
 data: data,

功能完成