日常业务工作中,我们经常遇到excel导出功能, 这里也来封一个吧,备用

需要借助两个工具实现,如下

cs-xlsx)来实现的。

js-xlsx的基础上又封装了Export2Excel.js来方便导出数据。

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

由于 Export2Excel不仅依赖js-xlsx还依赖file-saverscript-loader。所以我们得进行安装

[collapse status="false" title="安装命令"]

yarn add xlsx file-saver -S
yarn add script-loader -S -D

[/collapse]

[collapse status="false" title="按需引入加载"]

由于js-xlsx体积还是很大的,导出功能也不是一个非常常用的功能,所以使用的时候建议使用懒加载。使用方法如下:

下载所需要的资源包

[button color="success" url="https://down.ichuguang.com/s/pGhE" icon="glyphicon glyphicon-save" type=""] 资源下载[/button]

vue-element-admin提供了导出的功能模块,下载放置到src目录下

import('@/vendor/Export2Excel').then(excel => {
  excel.export_json_to_excel({
    header: tHeader, //表头 必填
    data, //具体数据 必填
    filename: 'excel-list', //非必填
    autoWidth: true, //非必填
    bookType: 'xlsx' //非必填
  })
})

[/collapse]

excel导出参数的介绍

参数

参数说明类型可选值默认值
header导出数据的表头Array/[]
data导出的具体数据Array/[[]]
filename导出文件名String/excel-list
autoWidth单元格是否要自适应宽度Booleantrue / falsetrue
bookType导出文件类型Stringxlsx, csv, txt,morexlsx

[collapse status="false" title="完成导出代码"]

  <el-button type="danger" size="small" @click="exportExcel">
          Excel导出</el-button
        >
 //这里,需要导出时间格式的处理
  formatFormOfEmployment(row, column, cellValue) {
      let f = EmployeeEnum.hireType.find((t) => t.id === cellValue);
      return f ? f.value : "";
    },


 // 导出excel数据
   async exportExcel() {
      //  做操作
      // 表头对应关系
     const headers = {
        姓名: "username",
        手机号: "mobile",
        入职日期: "timeOfEntry",
        聘用形式: "formOfEmployment",
        转正日期: "correctionTime",
        工号: "workNumber",
        部门: "departmentName",
      };

//这里的rows是整个需要导出列表的信息,getEmployeeList为请求列表数据的方法,
//这里将列表数据合成1页获取,根据业务逻辑需要进行修改
        const { rows } = await getEmployeeList({ page: 1, size: this.page.total })
        const data = this.formatJson(headers, rows)

//对获取的数据进行再次的处理
      let data = rows.map((t) => {
        t.timeOfEntry = formatDate(t.timeOfEntry);
        t.correctionTime = formatDate(t.correctionTime);
        let f = EmployeeEnum.hireType.find((m) => m.id === t.formOfEmployment);
        t.formOfEmployment = f ? f.value : "未知";
        return Object.values(pick(t, Object.values(headers)));
      });

//懒加载
      import("@/vendor/Export2Excel").then((excel) => {
        excel.export_json_to_excel({
          multiHeader: [["姓名", "主要信息", "", "", "", "", ""]],
          merges: ["A1:A2", "B1:G1"],
          header: Object.keys(headers), //表头 必填
          data: data, //具体数据 必填
          filename: "excel-list", //非必填
          autoWidth: true, //非必填
          bookType: "xlsx", //非必填
        });
      });
    },

[/collapse]

[collapse status="false" title="扩展:复杂表头导出"]

扩展 复杂表头的导出

当需要导出复杂表头的时候,vue-element-admin同样支持该类操作

vue-element-admin 提供的导出方法中有 multiHeadermerges 的参数

参数说明类型可选值默认值
multiHeader复杂表头的部分Array/[[]]
merges需要合并的部分Array/[]

multiHeader里面是一个二维数组,里面的一个元素是一行表头,假设你想得到一个如图的结构

mutiHeader应该这样定义

const multiHeader = [['姓名', '主要信息', '', '', '', '', '部门']]

multiHeader中的一行表头中的字段的个数需要和真正的列数相等,假设想要跨列,多余的空间需要定义成空串

它主要对应的是标准的表头

const header = ['姓名', '手机号', '入职日期', '聘用形式', '转正日期', '工号', '部门']

如果,我们要实现其合并的效果, 需要设定merges选项

 const merges = ['A1:A2', 'B1:F1', 'G1:G2']

merges的顺序是没关系的,只要配置这两个属性,就可以导出复杂表头的excel了

[/collapse]

标签: 总结 搬砖加速 代码

添加新评论