Vue3如何利用xlsx、xlsx-js-style导出Excel表格使用(适合新手)
作者：小朱小先生
在Vue项目中导出Excel表格是常见的功能,特别是在后台管理系统中,为了方便用户将大量数据保存为本地文件,这篇文章主要给大家介绍了关于Vue3如何利用xlsx、xlsx-js-style导出Excel表格使用的相关资料,需要的朋友可以参考下
适用于新手，仅包括：列宽设置、单元格合并、单元格样式设置
1、基本代码
这是最基础的代码，没有样式。其中的data数据格式例如如下：
[
[列1,列2,列3,列4],
[1,2,3,4],
[5,6,7,8]
]
import * as XLSX from 'xlsx';
function s2ab(s: string) {
const buf = new ArrayBuffer(s.length);
const view = new Uint8Array(buf);
for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
export default function exportExcel(data: any, fileName: string) {
// 创建一个空的Workbook对象
const wb = XLSX.utils.book_new();
// 创建一个新的Worksheet
const ws = XLSX.utils.aoa_to_sheet(data);
// 将Worksheet添加到Workbook中
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
// 生成Excel文件的Binary字符串
const excelBinaryString = XLSX.write(wb, {type: 'binary'});
// 将Binary字符串转换为Blob对象
const blob = new Blob([s2ab(excelBinaryString)], {type: 'application/octet-stream'});
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = fileName;
link.click();
URL.revokeObjectURL(link.href);
}2、设置列宽
这里要注意一个：wpx这个属性配置之后。如果网页上的列宽是200，那么导出之后会发现在Excel中的列宽变成237.xxx左右。若要保持网页宽度和导出后宽度一直。需要乘上0.843621。
wpx = 网页列宽 * 0.843621
// 创建一个新的Worksheet
const ws = XLSX.utils.aoa_to_sheet(data);
// 设置列宽。有几列就设置几个
wx["!cols"] = [
{
wpx: 180
}
];3、设置合并单元格
这里需要注意：单元格合并之后，合并后的显示内容将根据s里对应的单元格数据为主
// 创建一个新的Worksheet
const ws = XLSX.utils.aoa_to_sheet(data);
ws["!merges"] = [
{
s: { // 合并单元格开始单元格行列信息
r: 0, // 行号
c: 0 // 列号
},
e: { // 合并单元格结束单元格行列信息
r: 0, // 行号
c: 1 // 列号
}
}
];
// 上面的意思是从第1行第1列到第1行第2列的单元格。
// 需要合并几个，就写多少个{s:{r:0,c:0},e:{r:0,c:0}}4、单元格样式
这里需要使用xlsx-js-style包。基本代码如下。
具体样式设置查看文档：GitHub - gitbrent/xlsx-js-style: SheetJS Community Edition + Basic Cell Styles
// import * as XLSX from 'xlsx';
import XLSX from 'xlsx-js-style';
function s2ab(s: string) {
const buf = new ArrayBuffer(s.length);
const view = new Uint8Array(buf);
for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
export default function exportExcel(data: any, colsWidthArr: any, mergesArr: any, fileName: string) {
// 创建一个空的Workbook对象
const wb = XLSX.utils.book_new();
// 创建一个新的Worksheet
const ws = XLSX.utils.aoa_to_sheet(data);
if(colsWidthArr !== null){
ws["!cols"] = colsWidthArr
}
if(mergesArr !== null){
ws["!merges"] = mergesArr;
}
const ColName = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']; // 列索引名
for(let col = 0;col<data[0].length;col++){ // 根据表头，获取列号
for(let row = 0; row<data.length;row++){ // 根据内容，获取行号
let i = row +1; // 行号初始从1开始
ws[ColName[col]+i]['s'] = { // 这里解析成ws['A1'].s = {};根据每个单元格索引进行设置
alignment: {
vertical: 'center',
horizontal: 'left'
},
border: {
top: {
style: 'thin',
color: '#000000'
},
bottom: {
style: 'thin',
color: '#000000'
},
left: {
style: 'thin',
color: '#000000'
},
right: {
style: 'thin',
color: '#000000'
}
}
}
}
}
// 将Worksheet添加到Workbook中
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
// 生成Excel文件的Binary字符串
const excelBinaryString = XLSX.write(wb, {type: 'binary'});
// 将Binary字符串转换为Blob对象
const blob = new Blob([s2ab(excelBinaryString)], {type: 'application/octet-stream'});
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = fileName;
link.click();
URL.revokeObjectURL(link.href);
}
效果如下：
更新：
1、设置单元格样式的时候，需要对单元格进行判断，防止因为内容为空时导致报错。
...
if(ws[ColName[col]+i] === undefined){ // 防止内容为null时报错
continue
}
ws[ColName[col]+i]['s'] = {
...总结
到此这篇关于Vue3如何利用xlsx、xlsx-js-style导出Excel表格使用的文章就介绍到这了,更多相关Vue3导出Excel表格使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！