vue 基于 exceljs 导出 excel实战示例

原创

已于 2022-02-11 15:56:49 修改 · 7.1k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#excel #vue

于 2019-05-22 10:25:54 首次发布

背景

在做一个小东西，需要导出excel，之前导出excel 的方式都是在服务器端，生成excel然后在浏览器端进行下载，这次想进行在前端进行导出，基于这个需求在网上找了一些工具，这里会做一些对比

工具对比

名称	优点	缺点	活跃度
js-xlsx	支持nodejs服务端和兼容大多数浏览器导出，读写支持完美	社区版本不支持样式定制	15867
exceljs	支持nodejs服务端和兼容大多数浏览器导出，读写支持完美，活跃度很高，使用简单	国内使用的人很少,并且相关示例很少	3794
xlsx-style	基于xlsx的做的，支持xlsx原来所有的api也支持样式定制	无法直接使用有很多pr并没有任何并，活跃度很低，最近一次更新是2017年	334
msexcel-builder	轻量级，可以定制样式	导入支持的并不是很好，活跃度并不是很好，最近一次更新2017年	18

经过多方对比，最终选择用exceljs来做导出excel的工具库，因为开发着非常活跃，截至现在，几个小时之前还有更新，并且全面支持excel的读和写。下面来点干活，直接上代码

使用示例

导入包
```
npm install exceljs
```

封装的导出工具类,该工具类支持多sheet导出，支持多表头处理，默认会给表格加上边框的样式

require('script-loader!file-saver')
import * as ExcelJs from 'exceljs/dist/exceljs'

/**
 * 支持多sheet 导出excel
 * @param multiHeader 多行表头
 * @param headers 多sheet对应的表头
 * @param datas 数据，一个数组表示一个sheet中的数据
 * @param filename 文件名称
 * @param sheetnames sheet名称，数组格式的，数组中按次获取sheet名称
 * @param merges 合并单元格 未实现
 * @param autoWidth 自动列宽
 * @param bookType 文档类型
 */
export function export_json_to_excel_sheet({
     
     
  multiHeader = [],
  headers = [],
  datas = [],
  filename,
  sheetnames = [],
  merges = [],
  autoWidth = true,
  bookType = 'xlsx'
} = {
     
     }) {
     
     
  // 创建一个工作簿
  const workbook = new ExcelJs.Workbook()

  // 遍历数据
  for (let tmp = 0; tmp <= datas.length - 1; tmp++) {
     
     
    // 获取数据
    const data = datas[tmp]
    // 添加表头, 合并表头的数据
    const header = headers[tmp]
    data.unshift(header)
    // 多行标头
    for (let i = multiHeader.length - 1; i > -1; i--) {
     
     
      data.unshift(multiHeader[i])
    }
    // 获取shee