--how are u gonna spend your life? (how will you spend your life)
--I am not sure, but I do know, I am going to live every minute of it. (I am not sure, but I know, I will cherish every minute.)
Sheet JS has been used in a previous article, and this article will use this plugin again
Show results:
Form with download:
Downloaded file
Table of contents
1. Install dependencies and reference
Second, the preparation function
1. Install dependencies and reference
使用xlsx的时候也需要安装依赖
npm i xlsx -S
只需要在自己使用的那个vue页面引入即可
import XLSX from ‘xlsx’Second, the preparation function
These are the two functions that need to be used to process the excel configuration, create bloburl from the blob object, and then use the a tag to realize the pop-up download box.
It can be copied and used directly without modification.
// 生成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);
},3. Button export function
<el-button type="primary" plain size="mini" @click="exportBtn">导出</el-button>Among them, the number of sheets can be set for the downloaded file, and the content can be edited directly. You can achieve this by opening the two tables of the comment. Of course, the excel data of the downloaded table can also be dynamically loaded according to the effect of the page. Correspondingly, you need to modify the corresponding fields yourself.
// 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");
},Reference link: https://copyfuture.com/blogs-details/202204170950118354 Vue pure front-end download excel form_Last night small building and Dongfeng. Blog-CSDN blog_vue download excel https://copyfuture.com/blogs-details/202204170950118354