第一步：安裝兩個依賴包 npm install --save xlsx file-saver
第二：在你的頁面中添加引用
import FileSaver from "file-saver";
import XLSX from "xlsx";
第三步：導出兩個tab面板中的數據
導出方法： baseTable、alarmTable 與圖中的保持一致
exportExcel1() {
var workbook = XLSX.utils.book_new();
/* convert table 'table1' to worksheet named "Sheet1" */
var ws1 = XLSX.utils.table_to_sheet(document.querySelector('#
baseTable'));
XLSX.utils.book_append_sheet(workbook, ws1, "歷史數據");
/* convert table 'table2' to worksheet named "Sheet2" */
var ws2 = XLSX.utils.table_to_sheet(document.querySelector('#
alarmTable'));
XLSX.utils.book_append_sheet(workbook, ws2, "報警數據");
/* get binary string as output */
var wbOut = XLSX.write(workbook, {
bookType: "xlsx",
bookSST: true,
type: "array"
});
try {
FileSaver.saveAs(
new Blob([wbOut], { type: "application/octet-stream" }),
"數據查詢.xlsx"
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbOut);
}
return wbout;
},
以上導出的缺陷就是，只支持導出當前頁面的數據，不能導出全部數據，另外導出到文件后xlsx格式不能自定義。
下面說一下自定義樣式、及全部數據導出，直接貼代碼：
exportExcel() {
var that = this;
//要導出歷史數據標題
var arry = [['排灌站', '設備名稱', '運行時長（分鍾）', '開啟時間', '關閉時間']];
// 要導出的歷史數據
that.exportData.map(a => {
var _arry = [];
_arry.push(a.pumpstationName.toString());
_arry.push(a.itemName.toString());
_arry.push(a.runtime_Minute.toString());
_arry.push(a.startTime == null ? "" : this.$moment(a.startTime).format("YYYY-MM-DD HH:mm:ss")); //格式化日期沒有就返回空
_arry.push(a.endTime == null ? "" : this.$moment(a.endTime).format('YYYY-MM-DD HH:mm:ss')); //格式化日期沒有就返回空
return _arry;
}).forEach(a => {
arry.push(a);
});
//要導出的報警數據標題
var alarmInfoArry = [['排灌站', '預警類型', '當前值', '閾值']];
// 要導出的報警數據
that.alarmInfo.map(b => {
var _alarmInfoArry = [];
_alarmInfoArry.push(b.pumpName.toString());
_alarmInfoArry.push(b.alarmType.toString());
_alarmInfoArry.push(b.cuurentValue.toString());
_alarmInfoArry.push(b.thresholdValue.toString());
return _alarmInfoArry;
}).forEach(b => {
alarmInfoArry.push(b);
});
var sheetHistory = XLSX.utils.aoa_to_sheet(arry);//歷史數據sheet
var sheetAlarm = XLSX.utils.aoa_to_sheet(alarmInfoArry);//報警數據sheet
var workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, sheetHistory, "歷史數據");
XLSX.utils.book_append_sheet(workbook, sheetAlarm, "報警數據");
//循環歷史數據單元格設置樣式
var s = sheetHistory['!ref'];
sheetHistory.s = {
font: {
name: '宋體',
sz: 18,
color: { rgb: "#FFFF0000" },
bold: true,
italic: false,
underline: false
},
alignment: {
horizontal: "center",
vertical: "center"
}
};
var rows = s.substr(s.length - 1, 1);
var cloums = ['A', 'B', 'C', 'D', 'E'];
for (var j = 0; j < cloums.length; j++) {
for (var i = 1; i <= rows; i++) {
if (i == 1) {
sheetHistory[cloums[j] + i].s = { //樣式
font: {
bold: true,
italic: false,
underline: false
},
alignment: {
horizontal: "left",
vertical: "left",
wrap_text: false
}
};
}
else {
sheetHistory[cloums[j] + i].s = { //樣式
alignment: {
horizontal: "left",
vertical: "left",
wrap_text: false
}
};
}
}
}
sheetHistory["!cols"] = [{ wpx: 150 }, { wpx: 90 }, { wpx: 150 }, { wpx: 150 }, { wpx: 180 }]; //單元格列寬
//循環設置報警數據單元格樣式
var styleAlarm = sheetAlarm['!ref'];
sheetAlarm.styleAlarm = {
font: {
name: '宋體',
sz: 18,
color: { rgb: "#FFFF0000" },
bold: true,
italic: false,
underline: false
},
alignment: {
horizontal: "center",
vertical: "center"
}
};
var rows2 = styleAlarm.substr(styleAlarm.length - 1, 1);
var cloums2 = ['A', 'B', 'C', 'D'];
for (var k = 0; k < cloums2.length; k++) {
for (var L = 1; L <= rows2; L++) {
if (i == 1) {
sheetAlarm[cloums2[k] + L].s = { //樣式
font: {
bold: true,
italic: false,
underline: false
},
alignment: {
horizontal: "left",
vertical: "left",
wrap_text: false
}
};
}
else {
sheetAlarm[cloums2[k] + L].s = { //樣式
alignment: {
horizontal: "left",
vertical: "left",
wrap_text: false
}
};
}
}
}
sheetAlarm["!cols"] = [{ wpx: 150 }, { wpx: 90 }, { wpx: 150 }, { wpx: 150 }]; //單元格列寬
try {
var wbOut = XLSX.write(workbook, { bookType: "xlsx", bookSST: true, type: "array" });
FileSaver.saveAs(
new Blob([wbOut], { type: "application/octet-stream" }),
"數據查詢.xlsx"
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbOut);
}
// return wbout;
},
導出后表格樣式如圖：
