vue使用js-xlsx插件导出Excel文件

在 js-xlsx的基础上封装了Export2Excel.js来方便导出数据。

1.安装依赖

npm install xlsx file-saver -S
npm install script-loader -S -D

2.按需加载
由于js-xlsx体积还是很大的，导出功能也不是一个非常常用的功能，所以使用的时候建议使用懒加载。

在导出事件中加载
import('@/vendor/Export2Excel').then(excel => {
  excel.export_json_to_excel({
    header: tHeader, //表头 必填
    data, //具体数据 必填
    filename: 'excel-list', //非必填
    autoWidth: true, //非必填
    bookType: 'xlsx' //非必填
  })
})

参数

参数	说明	类型	可选值	默认值
header	导出数据的表头	Array	/	[]
data	导出的具体数据	Array	/	[[]]
filename	导出文件名	String	/	excel-list
autoWidth	单元格是否要自适应宽度	Boolean	true / false	true
bookType	导出文件类型	String	xlsx, csv, txt, more	xlsx

数据格式说明：

exportExcel(){
      // 导出文件需要两个必备数据
      // 一个是表头
      // 一个是数据本身
      const header = [
        'id',
        '姓名',
        '年龄'
      ]
      // 以前一般的数据, 都是数组包裹对象
      const students = [
        { id: 1, name: '王大锤', age: 12 },
        { id: 2, name: '陈翠花', age: 13 }
      ]
      // 这个插件需要的不是key:value声明的对象,
      // 只需要按照顺序给出的 value 值组成数组即可
      const data = [
        [1, '王大锤', 12],
        [2, '陈翠花', 13]
      ]

      import('@/vendor/Export2Excel').then(excel => {
        excel.export_json_to_excel({
          // 配置对象
          header,
          data
        })
      })
}

添加导出事件：

 async exportExcel() {
      // 1 加载所有数据
      // 将 total 总条数设为每页长度, 加载第一页即可得到所有数据
      // 请求获取所有员工数据列表
      const { rows } = await getEmployeeList({ page: 1, size: this.page.total })
      // 2 根据插件要求转换数据 header / data
      // 这两个都可以利用字典进行生成
      const dict = {
        '姓名': 'username',
        '手机号': 'mobile',
        '入职日期': 'timeOfEntry',
        '聘用形式': 'formOfEmployment',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName'
      }
      // header 只需要将这个对象的key拿出来组成数组即可
      // Object.keys()用来遍历对象的属性。参数都是一个对象，返回一个数组。返回数组的成员都是对象的所有属性名
      const header = Object.keys(dict)

      // 之前的数据,是一个数组包裹各个员工对象
      // 现在要将每个员工对象根据表头的顺序转换为数组,再将所有转换好的员工组成一个新数组
      // 使用映射, 将原来数组中的每个对象都映射成一个对应数组, 组成新结果 data
      const data = rows.map(user => {
        return this.objToArray(user, dict)
      })
      // 3 调用插件导出数据
      import('@/vendor/Export2Excel').then(excel => {
        // 拿到引入的包里所有导出的内容
        excel.export_json_to_excel({
          // 配置对象
          header,
          data,
          filename: '员工信息表'
        })
      })
    },

// 要导出的数据转换为数组
    objToArray(userObj, dict) {
      // 拿到中文key
      const header = Object.keys(dict)
      const userArray = []
      // 遍历表头，在字典里拿到英文key
      header.forEach(cnKey => {
        const enKey = dict[cnKey]
        // 拿到数据中该英文key对应的属性值
        let value = userObj[enKey]

        // 如果有时间数据和聘用形式，需要处理
        if (enKey === 'timeOfEntry' || enKey === 'correctionTime') {
          // 处理后为yyyy-mm-dd 可以在外面包裹一层 new Date 转成时间对象
          value = new Date(formatDate(value))
        }
        if (enKey === 'formOfEmployment') {
          // 枚举处理聘用形式 判断当前遍历的对象里id是否与enkey为聘用形式的值一样
          const obj = EmployeeEnum.hireType.find(item => item.id === value)
          value = obj ? obj.value : '未知'
        }

        // 属性值放入新数组中
        userArray.push(value)
      })
      // console.log(userArray)
      return userArray
    }