vue 基于 exceljs 导出 excel实战示例

背景

在做一个小东西，需要导出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的读和写。下面来点干活，直接上代码

使用示例

1. 导入包

   npm install exceljs
   

2. 封装的导出工具类,该工具类支持多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])
       }
       // 获取sheetname
       var ws_name = sheetnames[tmp]
       // add header
       const ws1 = workbook.addWorksheet(ws_name)
       ws1.addRows(data)
   
       // 行居中
       rowCenter(ws1, 1 + multiHeader.length, data.length)
   
       // 自动处理列宽
       if (autoWidth) {
         /* 设置worksheet每列的最大宽度*/
         const columnWidth = data.map(row => row.map(val => {
           /* 先判断是否为null/undefined*/
           if (val == null) {
             return {
               'width': 10
             }
             // eslint-disable-next-line brace-style
           }
           /* 再判断是否为中文*/
           else if (val.toString().charCodeAt(0) > 255) {
             return {
               'width': val.toString().length * 2
             }
           } else {
             return {
               'width': val.toString().length
             }
           }
         }))
         /* 以第一行为初始值*/
         const result = columnWidth[0]
         for (let i = 1; i < columnWidth.length; i++) {
           for (let j = 0; j < columnWidth[i].length; j++) {
             if (result[j]['width'] < columnWidth[i][j]['width']) {
               result[j]['width'] = columnWidth[i][j]['width']
             }
           }
         }
         // 设置列宽
         colWidth(ws1, result)
       }
     }
   
     /**
      *  设置start-end行单元格水平垂直居中/添加边框
      * @param arg_ws workSheet 参数
      * @param arg_start 开始行
      * @param arg_end 结束结束行
      */
     function rowCenter(arg_ws, arg_start, arg_end) {
       // eslint-disable-next-line no-undef,no-unmodified-loop-condition
       let i = arg_start
       for (; i <= arg_end; i++) {
         arg_ws.findRow(i).alignment = { vertical: 'middle', horizontal: 'center' }
         // eslint-disable-next-line no-irregular-whitespace
         // 循环 row 中的　cell，给每个 cell添加边框
         arg_ws.findRow(i).eachCell(function(cell, index) {
           cell.border = {
             top: { style: 'thin' },
             left: { style: 'thin' },
             bottom: { style: 'thin' },
             right: { style: 'thin' }
           }
         })
       }
     }
   
     // eslint-disable-next-line no-irregular-whitespace
     // 设置　start-end 列的宽度
     /**
      * 设置行宽
      * @param arg_ws workSheet
      * @param arg_cols 列数组
      */
     function colWidth(arg_ws, arg_cols) {
       for (const i in arg_cols) {
         arg_ws.getColumn(parseInt(i) + 1).width = arg_cols[i].width
       }
     }
   
     // 保存设置
     workbook.xlsx.writeBuffer().then(buffer => {
       // eslint-disable-next-line no-undef
       saveAs(new Blob([buffer], {
         type: 'application/octet-stream'
       }), `${filename}.${bookType}`)
     })
   }
   

3. 然后再vue中就可以使用该工具类，用法如下

import('@/vendor/Export2ExcelJs').then(excel => {
          const tHeader = ['测试1', '测试2', '测试3', '测试4', '测试5']
          const filterVal = ['test', 'test2', 'test3', 'test4', 'test5']
          const list = this.exportlist
          let text = '测试'
          const s = parseTime(this.begin, '{y}-{m}-{d}') + '至' + parseTime(this.end, '{y}-{m}-{d}')
          this.filename = s + text + '测试汇总表'

          const data = this.formatJson(filterVal, list)
          const multiHeader = [['', '', 'xxx系统', '', ''], ['', '', 'xxx汇总表', '', ''], ['查询日期：' + s, '', '', '', '查询范围：' + text]]
          console.log(data)
          excel.export_json_to_excel_sheet({
            headers: [tHeader],
            datas: [data],
            multiHeader: multiHeader,
            sheetnames: ['xxx汇总表'],
            filename: this.filename,
            autoWidth: this.autoWidth,
            bookType: this.bookType
          })
          this.downloadLoading = false
        })
        this.listLoading = false
      })

到这里本次文章到此结束