Implementation of the demo
If there is more need to refer to the XLSX library on Github, part of the reference to god’s research
Export logic to Excel:
- The whole table in Excel is called
workbook
, and each of these forms issheet
- Page to introduce XLSX library,
https://unpkg.com/xlsx/dist/xlsx.core.min.js
- To generate a sheet,
var sheet = XLSX.utils.json_to_sheet(jsonData)
Json_to_sheet converts an array composed of objects into a sheet, aoa_to_sheet converts a two-dimensional array into a sheet, and table_to_sheet converts the DOM of a table directly into a sheet - Create a virtual workbook,
var wb = XLSX.utils.book_new()
- Add sheet to workbook,
Xlsx.utils. Book_append_sheet (WB, sheet, "sheetName here ");
- Turn a workbook into a blob,
var blob = workbook2blob(wb)
Workbook2blob needs to be written manually, so I’ll post the code below - Using a tag and createObjectURL to achieve the download function,
OpenDownloadDialog (blob, 'Excel title.xlsx ');
OpenDownloadDialog will also put code down here
// Install the workbook as a BLOB object
function workbook2blob(workbook) {
// Generate excel configuration items
var wopts = {
// The type of file to generate
bookType: "xlsx".// // Whether to generate a Shared String Table. If this function is enabled, the speed will decrease, but it is more compatible with earlier versions of IOS devices
bookSST: false.type: "binary"
};
var wbout = XLSX.write(workbook, wopts);
// Turn the string into 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;
}
var blob = new Blob([s2ab(wbout)], {
type: "application/octet-stream"
});
return blob;
}
// Create a bloburl for the blob object, and then use the A tag to pop up the download box
function openDownloadDialog(blob, fileName) {
if (typeof blob == "object" && blob instanceof Blob) {
blob = URL.createObjectURL(blob); // Create bloB address
}
var aLink = document.createElement("a");
aLink.href = blob;
// a new attribute added to HTML5 that specifies the name of the file to be saved. It can be saved without a suffix. Note that sometimes this does not work in file:/// / mode
aLink.download = fileName || "";
var event;
if (window.MouseEvent) event = new MouseEvent("click");
/ / move
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);
}
// For example
let sheet1data = [ { department: "Administration Department".count: 2 }, { department: "Front end".count: 2}];let sheet2data = [ { name: "Zhang".do: "Filing" }, { name: "Bill".do: "Print"}];let sheet3data = [ { name: "Lord Zhang".do: "vue" }, { name: "Lord Lee".do: "react"}];var sheet1 = XLSX.utils.json_to_sheet(sheet1data);
var sheet2 = XLSX.utils.json_to_sheet(sheet2data);
var sheet3 = XLSX.utils.json_to_sheet(sheet3data);
/* create a new blank workbook */
var wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, sheet1, "Department Statistics");
XLSX.utils.book_append_sheet(wb, sheet2, "Administration Department");
XLSX.utils.book_append_sheet(wb, sheet3, "Front end");
const workbookBlob = workbook2blob(wb);
openDownloadDialog(workbookBlob, 'Department statistics. XLSX');
Copy the code