excel导入与导出

excel导入

1. 在vue-element-admin完整模板中有导入模板,可以将src/components/UploadExcel文件复制到自己的项目中进行修改。

2. 导入文件需要依赖xlsx包npm i xlsx 。

3. 导入文件的两个事件。

   • on-success:上传成功触发事件 拿到上传成功的数据。
   • before-upload:上传之前触发事件 对上传的文件进行校验,如限制文件上传的大小。

async handleEmployees(results, header) {  //上传成功的事件
   // header中, results中的数据是中文的, 但是提交给后台的要是英文的
      const newArr = []
      const userRelations = {
        入职日期: 'timeOfEntry',
        手机号: 'mobile',
        姓名: 'username',
        转正日期: 'correctionTime',
        工号: 'workNumber'
      }
      results.forEach((item) => {
        const obj = {}
        for (const key in item) {
          const engershKey = userRelations[key]
          if (engershKey === 'timeOfEntry' || engershKey === 'correctionTime') {
            obj[engershKey] = this.formatExcelDate(item[key], '-')
          } else {
            obj[engershKey] = item[key]
          }
        }
        newArr.push(obj)
      })
      await reqAddEmployeeBatch(newArr)  //调用导入接口
      this.$message.success('上传成功')
      this.$router.push('/employees')
    },

excel导出

1. 在vue-element-admin完整模板中找到src/vendor文件复制到自己的项目中使用
2. 导出文件需要依赖三个包 xlsx file-saver script-loader

excel导出参数

header 导出数据的表头是必须要写的,数组类型,默认值是[]
data 导出的具体数据必写,数组类型,默认值是[[],[]]
filename 导出文件名,字符串类型 ,默认值是excel-list
autoWidth 单元格是否要自适应宽度 ,布尔类型,默认是true
bookType 导出文件类型,字符串类型,可选值为xlsx, csv, txt, more,默认值是xlsx
复杂表头的导出
multiHeader 复杂表头的部分,数组类型 默认值是[[]]
merges 需要合并的部分,数组类型 默认值[]

handleDownload() {  //事件名
  import('@/vendor/Export2Excel').then(async(excel) => {
     // 表头
   const headersArr = ['姓名','手机号','入职日期','聘用形式','转正日期','工号','部门']
   
   const headersRelations = {姓名: 'username',手机号: 'mobile',入职日期: 'timeOfEntry', 聘用形式: 'formOfEmployment', 转正日期: 'correctionTime',工号: 'workNumber',部门: 'departmentName' }

        const {data: { rows } } = await reqEmployees(1, this.total) //调用ajax获取数据

        const newArr = []  //创建空数组,存放遍历好的数据,
         //循环遍历ajax数据
        rows.forEach((item) => {
          // 创建空数组,存放遍历的数组
          const arr = []
          headersArr.forEach((value) => {
            const englishkey = headersRelations[value]
            if (englishkey === 'formOfEmployment') {
              const res = EmployeeEnum.hireType.find((V) => V.id === item[englishkey])
              const obj = res ? res.value : '未知'
              arr.push(obj)
            } else {
              arr.push(item[englishkey])
            }
          })
          // 将arr里的数据增加到newArr里
          newArr.push(arr)
        })
        
        // 实现wxcel导出
        const multiHeader = [['姓名', '主要信息', '', '', '', '', '部门']]
        excel.export_json_to_excel({
          multiHeader: multiHeader,   //复杂表头
          merges: ['A1:A2', 'B1:F1', 'G1:G2'], //需要合并的部分
          header: headersArr, // 表头,调用上面的数组
          data: newArr, // 需要导出的数据
          filename: '员工信息表', // 导出表格名字
          autoWidth: true, // 表格宽度自适应
          bookType: 'xlsx' // 文件扩展名
        })
      })
    }