背景

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

工具对比

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

然后再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 })

到这里本次文章到此结束