純前端用XLSX庫導出excel，可含多個sheet

實現的demo

若是有更多須要參考xlsx庫的github，部分參考大神的研究

導出excel的邏輯：

• excel整個表格專業名詞是workbook，裏面每張表格是sheet
• 頁面引入xlsx的庫，https://unpkg.com/xlsx/dist/xlsx.core.min.js
• 把數據生成sheet，var sheet = XLSX.utils.json_to_sheet(jsonData)，json_to_sheet是將由對象組成的數組轉化成sheet，固然還有 aoa_to_sheet將一個二維數組轉成sheet 和 table_to_sheet將table的dom直接轉成sheet
• 建立虛擬的workbook，var wb = XLSX.utils.book_new()
• 把sheet添加到workbook裏，XLSX.utils.book_append_sheet(wb, sheet, "這裏是sheetName");
• 把workbook轉成blob，var blob = workbook2blob(wb)，這裏workbook2blob須要手動寫啦，下面會貼代碼
• 利用a標籤和createObjectURL實現下載功能，openDownloadDialog(blob, 'excel的標題.xlsx');，這裏openDownloadDialog也會在下面放上代碼

// 將workbook裝化成blob對象
function 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;
    }
    var blob = new Blob([s2ab(wbout)], {
        type: "application/octet-stream"
    });
    return blob;
}

    // 將blob對象建立bloburl，而後用a標籤實現彈出下載框
function 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);
}
// 用的例子
let sheet1data = [ { department: "行政部", count: 2 }, { department: "前端部", count: 2 } ];
let sheet2data = [ { name: "張三", do: "整理文件" }, { name: "李四", do: "打印" } ];
let sheet3data = [ { name: "張大人", do: "vue" }, { name: "李大人", 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, "部門統計");
XLSX.utils.book_append_sheet(wb, sheet2, "行政部");
XLSX.utils.book_append_sheet(wb, sheet3, "前端部");
const workbookBlob = workbook2blob(wb);
openDownloadDialog(workbookBlob, `部門統計.xlsx`);
複製代碼