在做一个小东西,需要导出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]
}
}))
}
到这里本次文章到此结束
文章浏览阅读645次。这个肯定是末尾的IDAT了,因为IDAT必须要满了才会开始一下个IDAT,这个明显就是末尾的IDAT了。,对应下面的create_head()代码。,对应下面的create_tail()代码。不要考虑爆破,我已经试了一下,太多情况了。题目来源:UNCTF。_攻防世界困难模式攻略图文
文章浏览阅读2.9k次,点赞3次,收藏10次。偶尔会用到,记录、分享。1. 数据库导出1.1 切换到dmdba用户su - dmdba1.2 进入达梦数据库安装路径的bin目录,执行导库操作 导出语句:./dexp cwy_init/[email protected]:5236 file=cwy_init.dmp log=cwy_init_exp.log 注释: cwy_init/init_123..._达梦数据库导入导出
文章浏览阅读1.9k次。1. 在官网上下载KindEditor文件,可以删掉不需要要到的jsp,asp,asp.net和php文件夹。接着把文件夹放到项目文件目录下。2. 修改html文件,在页面引入js文件:<script type="text/javascript" src="./kindeditor/kindeditor-all.js"></script><script type="text/javascript" src="./kindeditor/lang/zh-CN.js"_kindeditor.js
文章浏览阅读2.3k次,点赞6次,收藏14次。SPI的详情简介不必赘述。假设我们通过SPI发送0xAA,我们的数据线就会变为10101010,通过修改不同的内容,即可修改SPI中0和1的持续时间。比如0xF0即为前半周期为高电平,后半周期为低电平的状态。在SPI的通信模式中,CPHA配置会影响该实验,下图展示了不同采样位置的SPI时序图[1]。CPOL = 0,CPHA = 1:CLK空闲状态 = 低电平,数据在下降沿采样,并在上升沿移出CPOL = 0,CPHA = 0:CLK空闲状态 = 低电平,数据在上升沿采样,并在下降沿移出。_stm32g431cbu6
文章浏览阅读1.2k次,点赞2次,收藏8次。数据链路层习题自测问题1.数据链路(即逻辑链路)与链路(即物理链路)有何区别?“电路接通了”与”数据链路接通了”的区别何在?2.数据链路层中的链路控制包括哪些功能?试讨论数据链路层做成可靠的链路层有哪些优点和缺点。3.网络适配器的作用是什么?网络适配器工作在哪一层?4.数据链路层的三个基本问题(帧定界、透明传输和差错检测)为什么都必须加以解决?5.如果在数据链路层不进行帧定界,会发生什么问题?6.PPP协议的主要特点是什么?为什么PPP不使用帧的编号?PPP适用于什么情况?为什么PPP协议不_接收方收到链路层数据后,使用crc检验后,余数为0,说明链路层的传输时可靠传输
文章浏览阅读587次。软件测试工程师移民加拿大 无证移民,未受过软件工程师的教育(第1部分) (Undocumented Immigrant With No Education to Software Engineer(Part 1))Before I start, I want you to please bear with me on the way I write, I have very little gen...
文章浏览阅读304次。Thinkpad X250笔记本电脑,装的是FreeBSD,进入BIOS修改虚拟化配置(其后可能是误设置了安全开机),保存退出后系统无法启动,显示:secure boot failed ,把自己惊出一身冷汗,因为这台笔记本刚好还没开始做备份.....根据错误提示,到bios里面去找相关配置,在Security里面找到了Secure Boot选项,发现果然被设置为Enabled,将其修改为Disabled ,再开机,终于正常启动了。_安装完系统提示secureboot failure
文章浏览阅读10w+次,点赞93次,收藏352次。1、用strtok函数进行字符串分割原型: char *strtok(char *str, const char *delim);功能:分解字符串为一组字符串。参数说明:str为要分解的字符串,delim为分隔符字符串。返回值:从str开头开始的一个个被分割的串。当没有被分割的串时则返回NULL。其它:strtok函数线程不安全,可以使用strtok_r替代。示例://借助strtok实现split#include <string.h>#include <stdio.h&_c++ 字符串分割
文章浏览阅读2.3k次。1 .高斯日记 大数学家高斯有个好习惯:无论如何都要记日记。他的日记有个与众不同的地方,他从不注明年月日,而是用一个整数代替,比如:4210后来人们知道,那个整数就是日期,它表示那一天是高斯出生后的第几天。这或许也是个好习惯,它时时刻刻提醒着主人:日子又过去一天,还有多少时光可以用于浪费呢?高斯出生于:1777年4月30日。在高斯发现的一个重要定理的日记_2013年第四届c a组蓝桥杯省赛真题解答
文章浏览阅读851次,点赞17次,收藏22次。摘要:本文利用供需算法对核极限学习机(KELM)进行优化,并用于分类。
文章浏览阅读1.1k次。一、系统弱密码登录1、在kali上执行命令行telnet 192.168.26.1292、Login和password都输入msfadmin3、登录成功,进入系统4、测试如下:二、MySQL弱密码登录:1、在kali上执行mysql –h 192.168.26.129 –u root2、登录成功,进入MySQL系统3、测试效果:三、PostgreSQL弱密码登录1、在Kali上执行psql -h 192.168.26.129 –U post..._metasploitable2怎么进入
文章浏览阅读257次。本文将为初学者提供Python学习的详细指南,从Python的历史、基础语法和数据类型到面向对象编程、模块和库的使用。通过本文,您将能够掌握Python编程的核心概念,为今后的编程学习和实践打下坚实基础。_python人工智能开发从入门到精通pdf