JavaScript:在vue里使用xlsx-style插件创建带样式的excel文件
前面有一篇博客写了利用a标签生成excel文件,虽然简单,但不算太完美。JavaScript:利用a标签生成excel文件_粉末的沉淀的博客-CSDN博客在看了N多文章尝试了N多次后,终于找到了合适我的方法。1、xlsx和xlsx-style的关系两者都可以实现创建excel,但是xlsx免费版仅仅只能做单元格合并,收费版才能设置单元格样式,xlsx-style是基于xlsx的插件,免费,可以设置
前面有一篇博客写了利用a标签生成excel文件,虽然简单,但不算太完美。
JavaScript:利用a标签生成excel文件_粉末的沉淀的博客-CSDN博客
在看了N多文章尝试了N多次后,终于找到了合适我的方法。
1、xlsx和xlsx-style的关系
两者都可以实现创建excel,但是xlsx免费版仅仅只能做单元格合并,收费版才能设置单元格样式,xlsx-style是基于xlsx的插件,免费,可以设置单元格样式,但是缺少了xlsx插件里很多实用的功能,比如aoa_to_sheet,可以直接把二维数组转为sheet,真的挺好用。
aoa_to_sheet
: 这个工具类最强大也最实用了,将一个二维数组转成sheet,会自动处理number、string、boolean、date等类型数据;table_to_sheet
: 将一个table dom
直接转成sheet,会自动识别colspan
和rowspan
并将其转成对应的单元格合并;json_to_sheet
: 将一个由对象组成的数组转成sheet;
2、文件改造
梳理清楚两者的关系后,思路就是使用xlsx里的工具类生成sheet,然后使用xlsx-style来设置样式。
使用yarn add xlsx-style来安装,不知道为什么,我用npm安装要不就是一直卡着,要不就是下载的文件达不到样式设置的效果。
执行了yarn命令后,发现其实安装了两个插件,并且他俩dist包里的文件也相差无几,但我需要的js文件其实只有两个,xlsx dist下的xlsx.extendscript.js和xlsx-style dist下的xlsx.full.min.js,并且还需要手动将xlsx.extendscript.js里所有的XLSX改成XLSX2,因为这两个js文件里都有XLSX,冲突了,所以得把另一个修改一下。
3、实现代码
为了更高效,我们还需要使用一个自定义的js文件,里面包含了将一个sheet转成最终的excel文件的blob对象,然后利用URL.createObjectURL下载的方法,我将它命名为export.js。
代码如下:
// 将一个sheet转成最终的excel文件的blob对象,然后利用URL.createObjectURL下载
function sheet2blob(sheet, sheetName) {
sheetName = sheetName || 'sheet1';
var workbook = {
SheetNames: [sheetName],
Sheets: {}
};
workbook.Sheets[sheetName] = sheet; // 生成excel的配置项
var wopts = {
bookType: 'xlsx', // 要生成的文件类型
bookSST: false, // 是否生成Shared String Table,官方解释是,如果开启生成速度会下降,但在低版本IOS设备上有更好的兼容性
type: 'binary'
};
var wbout = XLSX.write(workbook, wopts);
var blob = new Blob([s2ab(wbout)], {
type: "application/octet-stream"
}); // 字符串转ArrayBuffer
function s2ab(s) {
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
return blob;
}
// 将workbook装化成blob对象,可支持多个sheet
function workbook2blob(workbook) {
// 生成excel的配置项
var wopts = {
// 要生成的文件类型
bookType: "xlsx",
// // 是否生成Shared String Table,官方解释是,如果开启生成速度会下降,但在低版本IOS设备上有更好的兼容性
bookSST: false,
type: "binary"
};
var wbout = XLSX.write(workbook, wopts);
// 将字符串转ArrayBuffer
function s2ab(s) {
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
return buf;
}
var blob = new Blob([s2ab(wbout)], {
type: "application/octet-stream"
});
return blob;
}
function openDownloadDialog(url, saveName) {
if (typeof url == 'object' && url instanceof Blob) {
url = URL.createObjectURL(url); // 创建blob地址
}
var aLink = document.createElement('a');
aLink.href = url;
aLink.download = saveName || ''; // HTML5新增的属性,指定保存文件名,可以不要后缀,注意,file:///模式下不会生效
var event;
if (window.MouseEvent) event = new MouseEvent('click');
else {
event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
}
aLink.dispatchEvent(event);
}
创建一个vue项目,在index.html文件里引入xlsx.extendscript.js、xlsx.full.min.js和export.js,js文件也可以放在其他位置,为了引入方便,我就直接跟index.html放一起了。
vue文件的代码如下:
<template>
<div style="width: 200px; margin:100px auto;">
<button @click="exportExcel">导出</button>
</div>
</template>
<script>
export default {
data() {
return {
value: [20, 50],
}
},
methods: {
exportExcel() {
var aoa = [
['姓名', '性别', '年龄', '注册时间'],
['张三', '男', 18, new Date()],
['李四', '女', 22, new Date()]
];
var sheet = XLSX2.utils.aoa_to_sheet(aoa);
//这个就是修改格式的代码
sheet["A1"].s = {
font: {
sz: 14,
bold: true,
color: {
rgb: "0000FF"
}
},
fill: {
bgColor: {
indexed: 64
},
fgColor: {
rgb: "FFFF00"
}
}
}; //<====设置xlsx单元格样式
openDownloadDialog(sheet2blob(sheet), '导出.xlsx');
}
}
}
</script>
<style scoped>
</style>
特别要注意,这里是XLSX2,因为我们手工修改过xlsx.extendscript.js。
最终效果:
本案例下载地址如下:
使用xlsx-style插件创建带样式的excel文件-Javascript文档类资源-CSDN下载
参考链接:
如何使用JavaScript实现纯前端读取和导出excel文件-好记的博客
前端导出 excel ,设置字体,列宽,行高,对其方式,合并单元格等效果_zhai_865327的博客-CSDN博客_xlsx-style 行高
更多推荐
所有评论(0)