--¿Cómo vas a pasar tu vida? (cómo vas a pasar tu vida)
--No estoy seguro, pero lo sé, voy a vivir cada minuto de ello (no estoy seguro, pero lo sé, apreciaré cada minuto).
Sheet JS se usó en un artículo anterior, y este artículo usará este complemento nuevamente
Mostrar resultados:
Formulario con descarga:
archivo descargado
Tabla de contenido
1. Instalar dependencias y referencia
En segundo lugar, la función de preparación.
3. Función de exportación de botones
1. Instalar dependencias y referencia
使用xlsx的时候也需要安装依赖
npm i xlsx -S
只需要在自己使用的那个vue页面引入即可
import XLSX from ‘xlsx’En segundo lugar, la función de preparación.
Estas son las dos funciones que deben usarse para procesar la configuración de Excel, crear bloburl a partir del objeto blob y luego usar la etiqueta a para realizar el cuadro de descarga emergente.
Se puede copiar y utilizar directamente sin modificaciones.
// 生成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. Función de exportación de botones
<el-button type="primary" plain size="mini" @click="exportBtn">导出</el-button>Entre ellos, se puede configurar el número de hojas para el archivo descargado y el contenido se puede editar directamente. Puede lograr esto abriendo las dos tablas del comentario. Por supuesto, los datos de Excel de la tabla descargada también se pueden cargar dinámicamente según el efecto de la página. En consecuencia, debe modificar los campos correspondientes usted mismo.
// 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");
},Enlace de referencia: https://copyfuture.com/blogs-details/202204170950118354 Vue pure front-end download excel form_Last night small building and Dongfeng. Blog-CSDN blog_vue descargar excel https://copyfuture.com/blogs-details/202204170950118354