vue+file-saver+xlsx+xlsx-style导出table为excel，自定义表格样式
1.安装 +引入 file-saver、xlsx、xlsx-style（样式），
1.文件保存 ^2.0.5
npm install file-saver --save
2.文件导出 ^0.18.5
npm install xlsx --save
3.设置样式 ^0.8.13
npm install xlsx-style --save
xlsx-style官网：wpx - npm
注意：安装xlsx-style遇到的问题找不到./cptable ,就解决方法如下：
https://www.cnblogs.com/caiguanzheng/p/17014193.html
//引入组件：
import FileSaver from "file-saver";
import XLSX from "xlsx";
import XLSXSTYLE from "xlsx-style";2.导出excel，设置样式
html:
1.点击按钮导出调用方法
导出excel
2.给要导出的table 设置id名 例：id="exportTable"
method:
1.只导出不改变样式 参考：Vue项目中将el-table表格中的数据导出为Excel文件
2.导出excel自定义样式：
前端导出表格 修改样式（xlsx-style）用法_前端导出excel设置样式_关忆北_的博客-CSDN博客
xlsx-style的用法_xlsx-js-style 单元格边框_落落寒灯灭的博客-CSDN博客
使用xlsx、xlsx-style自定义样式导出excel - 简书
vue3+vite项目使用xlsx+xlsx-style+file-saver导出带有样式的excel表格方法_xlsx vue3_lee_amazing的博客-CSDN博客
扩展：JavaScript导出excel文件，并修改文件样式 - 知乎
(1) 导出excel
//导出excel
exportToExcel() {
const XLSX = require("xlsx");
// console.log("XLSX", XLSX, FileSaver);
// 使用 this.$nextTick 是在dom元素都渲染完成之后再执行
this.$nextTick(function() {
// 设置导出的内容是否只做解析，不进行格式转换 false：要解析， true:不解析
const xlsxParam = { raw: true };
//调用改变样式的方法
const wb = this.setExlStyle(
XLSX.utils.table_to_book(
document.querySelector("#exportTable"),
xlsxParam
)
);
console.log("wb", wb);
// return;
// 导出excel文件名
let fileName =
(this.activeName == "reportform" ? "报表统计结果" : "站点统计结果") +
".xlsx";
//没搞懂里面参数啥意思，以后再说
// const wbout = XLSX.write(wb, {
// bookType: "xlsx",
// bookSST: true, //
// type: "array"
// });
// 注意：导出Excel, 注意这里用到的是XLSXSTYLE对象 才会有设置的样式
let wbout = XLSXSTYLE.write(wb, {
bookType: "xlsx", //生成的文件类型
bookSST: false,
type: "binary"
});
try {
// 下载保存文件
FileSaver.saveAs(
// new Blob([wbout], { type: "application/octet-stream" }),
new Blob([this.s2ab(wbout)], {
type: "application/octet-stream"
}),
fileName
);
} catch (e) {
if (typeof console !== "undefined") {
console.log(e, wbout);
}
}
return wbout;
});
},注意：导出excel 要带有你设置的样式 用引入的XLSXSTYLE 否则用 XLSX (老登！卡在这半天)
// 注意：导出Excel, 注意这里用到的是XLSXSTYLE对象 才会有设置的样式
let wbout = XLSXSTYLE.write(wb, {
bookType: "xlsx",
bookSST: false,
type: "binary"
});
//无样式导出 XLSX
let wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array"
});(2) 设置excel样式：边框、居中、背景、字体、行列宽、合并单元格、
在obj.Sheets.Sheet1里面设置样式, Sheet1为默认的可设置 {sheet:"xx表"} 参考 xlsx-style
A1~k2每个对象单元格设置s：{样式}
//设置表格样式
setExlStyle(data) {
// console.log(data);
Object.keys(data.Sheets.Sheet1).forEach(key => {
//设置每个单元格属性
if (key.indexOf("!") < 0) {
// 判断的方法if (data.Sheets.Sheet1[key].t) {
data.Sheets.Sheet1[key].s = {
// 边框
border: {
top: {
style: "thin"
},
bottom: {
style: "thin"
},
left: {
style: "thin"
},
right: {
style: "thin"
}
},
// 字体
font: {
sz: 12,
// bold: true,
color: {
// rgb: "FFFFFF" //白色
}
},
// 居中
alignment: {
horizontal: "center",
vertical: "center",
wrapText: true
}
//背景颜色
// fill: {
// fgColor: {
// rgb: "808080" //灰色
// }
// }
};
}
});
//导出的excel会给k这列两行有样式，手动去掉
data.Sheets.Sheet1["K1"].s = {};
data.Sheets.Sheet1["K2"].s = {};
//列宽
data.Sheets.Sheet1["!cols"] = [];
//行宽
data.Sheets.Sheet1["!rows"] = [];
//根据table.length 行数设置每行宽度
// data.Sheets.Sheet1["!rows"].push({ hpx: 20 });
//根据列数设置每一列的列宽 这里table有10列
for (let i = 0; i < 10; i++) {
data.Sheets.Sheet1["!cols"].push({ wpx: 100, wch: 20 });
}
data.Sheets.Sheet1["!cols"][0].wpx = 150;
return data;
},（3） 文件流转换
// 文件流转换
s2ab(s) {
//如果存在ArrayBuffer对象(es6) 最好采用该对象
if (typeof ArrayBuffer !== "undefined") {
//1、创建一个字节长度为s.length的内存区域
const buf = new ArrayBuffer(s.length);
//2、创建一个指向buf的Unit8视图，开始于字节0，直到缓冲区的末尾
const view = new Uint8Array(buf);
//3、返回指定位置的字符的Unicode编码
for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
return buf;
} else {
const buf = new Array(s.length);
for (let i = 0; i !== s.length; ++i) buf[i] = s.charCodeAt(i) & 0xff;
return buf;
}
},导出的excel展示图：
