持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情
之前的一篇文章中已经使用过sheet JS，本文章将再次使用这个插件
效果展示：
带下载的表格：
下载后的文件
一、安装依赖并引用
使用xlsx的时候也需要安装依赖
npm i xlsx -S
只需要在自己使用的那个vue页面引入即可
import XLSX from ‘xlsx’
二、准备函数
这是需要用到的两个函数，用来处理excel配置，将blob对象 创建bloburl,然后用a标签实现弹出下载框。
无需修改，可以直接copy使用。
说明：
workbook2blob进行生成excel的配置， bookType表示生成的文件类型；是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性；
s2ab（）函数主要用于将字符串转ArrayBuffer；
openDownloadDialog（）函数将blob对象 创建bloburl,然后用a标签实现弹出下载框；
blob = URL.createObjectURL(blob); 用于创建blob地址；
aLink.download = fileName || ""; HTML5新增的属性，指定保存文件名，可以不要后缀，注意，有时候 file:///模式下不会生效
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;
}
let buf = s2ab(wbout);
var blob = new Blob([buf], {
type: "application/octet-stream",
});
return blob;
},
// 将blob对象 创建bloburl,然后用a标签实现弹出下载框
openDownloadDialog(blob, fileName) {
if (typeof blob === "object" && blob instanceof Blob) {
blob = URL.createObjectURL(blob); // 创建blob地址
}
var aLink = document.createElement("a");
aLink.href = blob;
// HTML5新增的属性，指定保存文件名，可以不要后缀，注意，有时候 file:///模式下不会生效
aLink.download = fileName || "";
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);
},
三、按钮导出函数
<el-button type="primary" plain size="mini" @click="exportBtn">导出</el-button>
其中，下载的文件可以设定sheet个数，并且直接编辑内容。你可以将注释的两个表格打开就可以实现。当然，下载的表格的excel数据也可以根据页面的效果动态加载。相应就需要友友们自己修改对应的字段了。
说明：
sheet1data 用于拼凑需要生成的数据 var sheet1 = XLSX.utils.json_to_sheet(sheet1data); 用于创建一个新的空的workbook
exportBtn() {
this.exportExcel();
},
// 生成excel数据
exportExcel() {
let temp = [];
let sheet1data = [
{
序号: "1",
时间: "2021.5.12 10:09:22",
资源IP: "192.168.50.116",
资源名称: "服务器1",
运维人员: "李四 - 公司1",
操作: "上传",
文件名称: "说明文件.txt",
风险归类: "疑似涉军",
},
{
序号: "2",
时间: "2022.3.12 15:09:22",
资源IP: "112.168.50.116",
资源名称: "服务器2",
运维人员: "张三 - 公司2",
操作: "上传",
文件名称: "说明文件.txt",
风险归类: "疑似涉政",
},
];
var sheet1 = XLSX.utils.json_to_sheet(sheet1data);
// 创建一个新的空的workbook
var wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, sheet1, "文件审计");
// XLSX.utils.book_append_sheet(wb, sheet2, "权利人信息");
// XLSX.utils.book_append_sheet(wb, sheet3, "房屋信息");
const workbookBlob = this.workbook2blob(wb);
this.openDownloadDialog(workbookBlob, "文件审计.xls");
},
