vue 基于 exceljs 导出 excel实战示例

背景

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

工具对比

经过多方对比，最终选择用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] } })) } 

到这里本次文章到此结束