vue-admin-template中使用Export2Excel.js实现导出excel功能

---

一、安装依赖包

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

二、在项目中引入Export2Excel.js

由于我们在 vue-admin-template基础模板中没有该js文件，我们需要在vue-element-admin官网中查阅文档，将对应的Export2Excel.js代码引入到自己的项目中，这里直接将链接: Export2Excel.js的代码直接复制到自己的项目中，使用其中的export_json_to_excel方法来实现功能。

三、使用

vue-element-admin官网中作者推荐我们使用懒加载引入我们的Export2Excel.js，因为Export2Excel.js中的依赖包js-xlsx还是很大的，这里我们按照官网中推荐的方法来使用。

handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(async excel => {
        const headers = {
          姓名: 'username',
          手机号: 'mobile',
          入职日期: 'timeOfEntry',
          聘用形式: 'formOfEmployment',
          转正日期: 'correctionTime',
          工号: 'workNumber',
          部门: 'departmentName'
        }
        try {
          const { rows } = await getEmployees({ page: 1, size: this.total })
          const data = this.formatJson(headers, rows)
          const multiHeader = [['姓名', '主要信息', '', '', '', '', '部门']]
          const merges = ['A1:A2', 'B1:F1', 'G1:G2']
          excel.export_json_to_excel({
            header: Object.keys(headers),
            data,
            filename: '员工数据',
            multiHeader,
            merges
          })
        } catch (err) {
          console.log(err)
        }
        this.downloadLoading = false
      })
    },
    formatJson(headers, rows) {
      // 将json数据转换成导出excel参数所需要的数组中包数组的格式
      return rows.map(v => {
        // 先找到每条员工数据
        return Object.keys(headers).map(key => {
          // 找到每个中文表头key，则headers[key]就是中文表头对应的英文
          if (
            headers[key] === 'timeOfEntry' ||
            headers[key] === 'correctionTime'
          ) {
            // 转换时间格式
            return formatDate(v[headers[key]])
          }
          if (headers[key] === 'formOfEmployment') {
            const obj = employeesConstant.hireType.find(
              item => item.id === v[headers[key]]
            )
            return obj ? obj.value : '未知'
          }
          return v[headers[key]]
        })
      })
    }

四、参数

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