1. 程式人生 > >純前端匯出excel

純前端匯出excel

今天在專案中遇到前端需要匯出excel檔案,可把我難住了!!!

特別是網上都沒有一個dome!口亨!!!

看了三個篇部落格,終於把三個博主的東東湊成了一個簡單dome!!!

1.引入外部依賴js檔案:

外部引用檔案:

xlsx.core.min.js

xlsx.full.min.js(包含了所有功能模組

引用js檔案在dist目錄下,官方GitHub:https://github.com/SheetJS/js-xlsx

 2.   生成一個sheet 

  • aoa_to_sheet: 將一個二維陣列轉成sheet,會自動處理number、string、boolean、date等型別資料;
  • table_to_sheet: 將一個table標籤直接轉成sheet,會自動識別colspan和rowspan並將其轉成對應的單元格合併;
  • json_to_sheet: 將一個由物件組成的陣列轉成sheet;

3.將一個sheet轉最終的excel檔案的blob物件,利用URL.createObjectURL下載

 完整程式碼如下:

    function openDownloadDialog(url, saveName) {
        if (typeof url == 'object' && url instanceof Blob) {
            url = URL.createObjectURL(url); // 建立blob地址
        }
        var aLink = document.createElement('a');
        aLink.href = url;
        aLink.download = saveName || ''; // HTML5新增的屬性,指定儲存檔名,可以不要字尾,注意,file:///模式下不會生效
        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);
    }

    // 將一個sheet轉成最終的excel檔案的blob物件,然後利用URL.createObjectURL下載
    function sheet2blob(sheet, sheetName) {
        sheetName = sheetName || 'sheet1';
        var workbook = {
            SheetNames: [sheetName],
            Sheets: {}
        };
        workbook.Sheets[sheetName] = sheet;
        // 生成excel的配置項
        var wopts = {
            bookType: 'xlsx', // 要生成的檔案型別
            bookSST: false, // 是否生成Shared String Table,官方解釋是,如果開啟生成速度會下降,但在低版本IOS裝置上有更好的相容性
            type: 'binary'
        };
        var wbout = XLSX.write(workbook, wopts);
        var blob = new Blob([s2ab(wbout)], {type: "application/octet-stream"});
        // 字串轉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;
        }
        return blob;
    }

    function f() {
        var arr = [
            {
                '學號': '11701',
                '姓名': '陳東東',
                '專業': '數字媒體技術',
            },
            {
                '學號': '11702',
                '姓名': '方點點',
                '專業': '數字媒體技術',
            },
        ];
        var sheet = XLSX.utils.json_to_sheet(arr);
        openDownloadDialog(sheet2blob(sheet), '匯出.xlsx');
    }