当前位置: 首页 > 工具软件 > ExcelJS > 使用案例 >

vue 基于 exceljs 导出 excel实战示例

范鸿畅
2023-12-01

背景

在做一个小东西,需要导出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
      })

格式化代码如下

formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'createdDate') {
          return parseTime(v[j], '{y}-{m}-{d}')
        } else {
          if (j.indexOf('.') > 0) {
            const t = j.split('.')
            return v[t[0]][t[1]]
          }
          return v[j]
        }
      }))
    }

到这里本次文章到此结束

 类似资料: