在做一个小东西,需要导出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])
}
// 获取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
})
格式化代码如下
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]
}
}))
}
到这里本次文章到此结束