--how are u gonna spend your life？（你将如何度过这一生）
--I am not sure，but I do know，I am going to live every minute of it.（我不确定，但我知道，我会珍惜每一分钟。）
之前的一篇文章中已经使用过sheet JS，本文章将再次使用这个插件
【Vue项目实践】实现在线预览word文件、excel文件_小白Rachel的博客-CSDN博客_vue word预览
【vue工作随笔】前端配合后端进行文件下载的方法记录_小白Rachel的博客-CSDN博客_vue从后端下载文件
效果展示：
带下载的表格：
下载后的文件
目录
一、安装依赖并引用
使用xlsx的时候也需要安装依赖
npm i xlsx -S
只需要在自己使用的那个vue页面引入即可
import XLSX from ‘xlsx’二、准备函数
这是需要用到的两个函数，用来处理excel配置，将blob对象 创建bloburl,然后用a标签实现弹出下载框。
无需修改，可以直接copy使用。
// 生成excel的配置
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数据也可以根据页面的效果动态加载。相应就需要友友们自己修改对应的字段了。
// xlsx的按钮点击事件
exportBtn() {
this.exportExcel();
},
// 生成excel数据
exportExcel() {
let temp = [];
// this.tableData.forEach((e) => {
// temp.push({
// // 序号: "1",
// 时间: e.date,
// 资源IP: e.resourceIP,
// 资源名称: e.resourceName,
// 运维人员: e.user,
// 操作: e.code,
// 文件名称: e.fileName,
// 风险归类:
// e.type == 1 ? "疑似涉政" : e.type == 2 ? "疑似涉军" : "疑似病毒",
// });
// });
// let sheet1data = 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",
风险归类: "疑似涉政",
},
];
// let sheet2data = [
// {
// 宅基地使用权力人名: "张三",
// 手机: "13890778902",
// 权利人类型: "事业单位",
// 户口类型: "城市户口",
// },
// {
// 宅基地使用权力人名: "黎晓",
// 手机: "13890778901",
// 权利人类型: "事业单位",
// 户口类型: "城市户口",
// },
// ];
// let sheet3data = [
// {
// 房屋代码: "JK098",
// 房屋结构: "钢筋混凝土结构",
// 建筑面积: 600,
// 建筑年代: "90年代",
// 建筑层数: 6,
// 是否发证: "是",
// 房屋状态: "正常",
// },
// {
// 房屋代码: "JK099",
// 房屋结构: "钢筋混凝土结构",
// 建筑面积: 800,
// 建筑年代: "80年代",
// 建筑层数: 9,
// 是否发证: "是",
// 房屋状态: "正常",
// },
// {
// 房屋代码: "JK198",
// 房屋结构: "钢筋混凝土结构",
// 建筑面积: 200,
// 建筑年代: "70年代",
// 建筑层数: 3,
// 是否发证: "是",
// 房屋状态: "危旧",
// },
// {
// 房屋代码: "JK298",
// 房屋结构: "钢筋混凝土结构",
// 建筑面积: 300,
// 建筑年代: "60年代",
// 建筑层数: 2,
// 是否发证: "是",
// 房屋状态: "倒塌",
// },
// {
// 房屋代码: "JK398",
// 房屋结构: "钢筋混凝土结构",
// 建筑面积: 500,
// 建筑年代: "90年代",
// 建筑层数: 7,
// 是否发证: "是",
// 房屋状态: "正常",
// },
// {
// 房屋代码: "JK498",
// 房屋结构: "钢筋混凝土结构",
// 建筑面积: 900,
// 建筑年代: "90年代",
// 建筑层数: 9,
// 是否发证: "是",
// 房屋状态: "在建",
// },
// ];
var sheet1 = XLSX.utils.json_to_sheet(sheet1data);
// var sheet2 = XLSX.utils.json_to_sheet(sheet2data);
// var sheet3 = XLSX.utils.json_to_sheet(sheet3data);
// console.log(sheet1, sheet2, sheet3, "sheet123");
// 创建一个新的空的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");
},参考链接：https://copyfuture.com/blogs-details/202204170950118354vue纯前端下载excel表格_昨夜小楼又东风。的博客-CSDN博客_vue下载excelhttps://copyfuture.com/blogs-details/202204170950118354