前言
導(dǎo)入依賴，具體前端vue配置就不介紹了，直接曬具體細節(jié)代碼
實現(xiàn)
需要在多table外加div，其他都是基本操作
js代碼文章來源：http://www.zghlxwxcb.cn/news/detail-607050.html
import FileSaver from 'file-saver'
import * as XLSX from "xlsx";
const htmlToExcel = {
getExcelNew(className, excelName) {
var xlsxParam = {raw: true}; // 導(dǎo)出的內(nèi)容只做解析，不進行格式轉(zhuǎn)換
// 創(chuàng)建新的表格元素并插入到DOM中
var newTable = document.createElement('table');
newTable.innerHTML = document.querySelector("#table2");
newTable.innerHTML = document.querySelector("#table3");
newTable.innerHTML = document.querySelector("#table4");
newTable.innerHTML = document.querySelector("#table5");
newTable.innerHTML = document.querySelector("#table6");
newTable.innerHTML = document.querySelector("#table7");
document.body.appendChild(newTable);
let fix = document.querySelector('.el-table__fixed');
// document.querySelector('.el-picker-panel').innerHTML = "";
// document.querySelector('.el-picker-panel').parentNode.removeChild(document.querySelector('.el-picker-panel'));
let wb;
if (fix) { //判斷要導(dǎo)出的節(jié)點中是否有fixed的表格，如果有，轉(zhuǎn)換excel時先將該dom移除，然后append回去
wb = XLSX.utils.table_to_book(document.querySelector(className).removeChild(fix));
document.querySelector(className).appendChild(fix);
} else {
wb = XLSX.utils.table_to_book(document.querySelector("#tableApp"));
}
var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: true, type: 'array'});
try {
FileSaver.saveAs(new Blob([wbout], {type: 'application/octet-stream'}), excelName + ".xlsx")
} catch (e) {
if (typeof console !== 'undefined') {
}
}
return wbout
},
};
export default htmlToExcel;
點個贊吧！文章來源地址http://www.zghlxwxcb.cn/news/detail-607050.html
到了這里，關(guān)于若依vue 多table前端HTML頁面導(dǎo)出一張Excel表的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
