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 calledworkbook, 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