excel导出功能

最新推荐文章于 2024-05-30 11:59:50 发布

爱蹦哒的咸鱼

最新推荐文章于 2024-05-30 11:59:50 发布

阅读量85

点赞数 1

文章标签： excel 前端 vue.js javascript ajax Powered by 金山文档

本文链接：https://blog.csdn.net/m0_68393821/article/details/129275808

版权

安装excel所需依赖和按需加载

由于 Export2Excel不仅依赖js-xlsx还依赖file-saver和script-loader，所以你先需要安装如下命令：

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

excel导出参数的介绍

excel导出基本的结构

添加文件夹vendor/Export2Excel.js中的方法

// 导出excel
async exportData() {
   // 定义对应关系- 把英文的key转化成中文的key所对应的值
   const headers = {
      '姓名': 'username',
      '手机': 'mobile',
      '入职日期': 'timeOfEntry',
      '聘用形式': 'formOfEmployment',
      '转正日期': 'correctionTime',
      '工号': 'workNumber',
      '部门': 'departmentName'
   }
   const { rows } = await getEmployeesList({ page: 1, size: this.page.total })//获取列表的接口
   // rows就是所有的数据 rows [{},{},{}] => [[],[],[],[]]
   const data = []
   rows.forEach(obj => {
       const arr = []
       Object.values(headers).forEach(value => {
          arr.push(obj[value])
       })
       data.push(arr)
   })
   // 懒加载 script-loader
   const excel = await import('@/vendor/Export2Excel')
   excel.export_json_to_excel({
      header: Object.keys(headers),
      data,
      filename: 'ihrm人力资源用户表', // 非必填
      autoWidth: true, // 非必填
      bookType: 'xlsx' // 非必填
    })
 }