vue根据vue-admin-template封装导出excel数据文件组件

最新推荐文章于 2023-12-19 11:22:33 发布

原创最新推荐文章于 2023-12-19 11:22:33 发布 · 693 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文介绍了在Vue项目中如何实现Excel表格的导出，依赖于js-xlsx、file-saver和script-loader库。通过懒加载技术优化路由，仅在访问时加载所需页面。在导出数据时，首先处理数据格式，然后调用Export2Excel函数，自定义表头并设置其他导出选项。同时展示了如何处理时间格式和特定字段的转换。

（1）由于 Export2Excel不仅依赖js-xlsx还依赖file-saver和script-loader。先需要安装如下命令

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

（2）导出表格地址

https://github.com/PanJiaChen/vue-element-admin
/blob/master/src/vendor/Export2Excel.js

（3）路由懒加载

懒加载：访问到当前的路由的时候再去加载对应的页面文件。

如果没有懒加载，会把所有文件打包到一个js文件里面。打包：yarn build

使用懒加载时，import语法会让webpack把路径对应文件单独打包成一个js文件，

如何获取import导入的文件（内部必须导出模块）。import（'文件路径'）返回的是一个promise，成功回调函数里，会把文件作为参数传入

（4）点击导出表格

async exportData() {
  const headers = {
    手机号: 'mobile',
    姓名: 'username',
    入职日期: 'timeOfEntry',
    聘用形式: 'formOfEmployment',
    转正日期: 'correctionTime',
    工号: 'workNumber',
    部门: 'departmentName'
  }
  const { export_json_to_excel } = await import(
    '@/views/vendors/Export2Excel'
  )
  const { rows } = await getEmployeeList({ page: 1, size: this.page.total })
  const data = this.handleJson(rows, headers)
  export_json_to_excel({
    header: Object.keys(headers), // 表头 必填
    data, // 具体数据 必填
    filename: 'excel-list', // 非必填
    autoWidth: true, // 非必填
    bookType: 'xlsx' // 非必填
  })
},

（5）处理数据

handleJson(rows, headers) {
  const arr = rows.map((item) => {
    const res = Object.keys(headers).map((key) => {
      return item[headers[key]]
    })
    return res
  })
  return arr
}

（6）处理时间和应聘格式

if (
  headers[key] === 'timeOfEntry' ||
  headers[key] === 'correctionTime'
) {
  return formatDate(item[headers[key]])
} else if (headers[key] === 'formOfEmployment') {
  // 注：这里hireType映射不过来
  const label = EmployeeEnum.hireTyp.find(
    (child) => child.id === item[headers[key]]
  )?.value
  return label
}