vue实现数据导出成excel形式的文件

首先下载依赖

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

<el-button type="warning" plain size="mini" icon="el-icon-download" 
@click="exportExcel">导出</el-button>

/**
     * 格式化入职时间
     */
    formateTimeOfEntry (value) {
      // 对原始数据 进行处理
      return value ? dayjs(value).format('YYYY年MM月DD日') : ''
    },
    // 导出
    async exportExcel () {
      // 请注意: 如果导出的是当前页, 那么数据, this.list 即可,
      // 但是我们一般导出的是全部的数据, 需要请求到所有的数据
      const { data } = await getRoleListAPI({ page: 1, limit: this.count })
      const headersArr = ['角色ID', '角色名称', '角色描述', '创建时间']
      const headersRelations = {
        '角色ID': 'id',
        '角色名称': 'name',
        '角色描述': 'description',
        '创建时间': 'create_date'
      }
      const dataArr = this.formatJson(data.data, headersArr, headersRelations)
      import('@/vendor/Export2Excel').then(excel => {
        excel.export_json_to_excel({
          header: headersArr, // 表头 必填
          data: dataArr, // 具体数据 必填
          filename: 'excel-list', // 非必填
          autoWidth: true, // 非必填
          bookType: 'xlsx' // 非必填
        })
      })
    },
    // 将表头数据和数据进行对应
    formatJson (rows, headersArr, headersRelations) {
      const resultsArr = rows.map((item) => {
        const arr = []
        headersArr.forEach(key => {
          const englishKey = headersRelations[key]
          let value = item[englishKey]
          // if (['timeOfEntry', 'correctionTime'].includes(englishKey)) {
          //   value = this.formateTimeOfEntry(value)
          // }
          // if (englishKey === 'formOfEmployment') {
          //   const obj = EmployeeEnum.hireType.find(obj => obj.id === +value)
          //   value = obj ? obj.value : '未知'
          // }
          if (englishKey === 'create_date') {
            value = this.formateTimeOfEntry(value)
          }
          arr.push(value)
        })
        return arr
      })
      return resultsArr
    }