前端js實現將table中的數據導出到Excel ---- 兼容主流瀏覽器

IE瀏覽器注意事項:

1.IE11瀏覽器通過 !!window.ActiveXObject || "ActiveXObject" in window 進行判斷;

2.在 工具–Internet選項–自定義級別–ActiveX控件和插件 下,
將“對未標記爲可安全執行腳本的ActiveX控件初始化並執行腳本”勾選爲“啓用”;

js代碼實現:

var idTmr;
function  getExplorer() {
    var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字符串
    var isOpera = userAgent.indexOf("Opera") > -1; //判斷是否Opera瀏覽器
    var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判斷是否IE瀏覽器
    var isEdge = userAgent.indexOf("Windows NT 6.1; Trident/7.0;") > -1 && !isIE; //判斷是否IE的Edge瀏覽器
    var isFF = userAgent.indexOf("Firefox") > -1; //判斷是否Firefox瀏覽器
    var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1; //判斷是否Safari瀏覽器
    var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1; //判斷Chrome瀏覽器

    //ie
    if (isIE || !!window.ActiveXObject || "ActiveXObject" in window) {
        return 'ie';
    }
    //firefox
    else if (isFF) {
        return 'Firefox';
    }
    //Chrome
    else if(isChrome){
        return 'Chrome';
    }
    //Opera
    else if(isOpera){
        return 'Opera';
    }
    //Safari
    else if(isSafari){
        return 'Safari';
    }
}
function export_excel(tableid) {
    if(getExplorer()=='ie'){
        var curTbl = document.getElementById(tableid);
        var oXL;
        try {
            oXL = new ActiveXObject("Excel.Application"); //創建AX對象excel
        } catch (e) {
            alert("無法啓動Excel!\n\n如果您確信您的電腦中已經安裝了Excel," + "那麼請調整IE的安全級別。\n\n具體操作:\n\n" + "工具 → Internet選項 → 安全 → 自定義級別 → 對沒有標記爲安全的ActiveX進行初始化和腳本運行 → 啓用");
            return false;
        }

        var oWB = oXL.Workbooks.Add();
        var oSheet = oWB.ActiveSheet;
        var Lenr = curTbl.rows.length;
        for (i = 0; i < Lenr; i++) {
            var Lenc = curTbl.rows(i).cells.length;
            for (j = 0; j < Lenc; j++) {
                oSheet.Cells(i + 1, j + 1).value = curTbl.rows(i).cells(j).innerText;
            }
        }
        oXL.Visible = true;

        //導出剪切板上的數據爲excel
//        var curTbl = document.getElementById(tableid);
//        var oXL = new ActiveXObject("Excel.Application"); //創建AX對象excel
//        var oWB = oXL.Workbooks.Add();
//        var xlsheet = oWB.Worksheets(1);
//        var sel = document.body.createTextRange();
//        sel.moveToElementText(curTbl);
//        sel.collapse(true);
//        sel.select();
//        sel.execCommand("Copy");
//        xlsheet.Paste();
//        oXL.Visible = true;
//
//        try {
//            var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
//        } catch (e) {
//            console.log("Nested catch caught " + e);
//        } finally {
//            oWB.SaveAs(fname);
//            oWB.Close(savechanges = false);
//            oXL.Quit();
//            oXL = null;
//            idTmr = window.setInterval("Cleanup();", 1);
//        }
    }else{
        tableToExcel(tableid)
    }
}
function Cleanup() {
    window.clearInterval(idTmr);
    CollectGarbage();
}

var tableToExcel = (function() {
    var uri = 'data:application/vnd.ms-excel;base64,',
    template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
    base64 = function(s) {
        return window.btoa(unescape(encodeURIComponent(s)))
    },
    // 下面這段函數作用是:將template中的變量替換爲頁面內容ctx獲取到的值
    format = function(s, c) {
        return s.replace(/{(\w+)}/g,
            function(m, p) {
                return c[p];
            }
        )
    };
    return function(table, name) {
        if (!table.nodeType) {
            table = document.getElementById(table)
        }
        // 獲取表單的名字和表單查詢的內容
        var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML};
        // format()函數:通過格式操作使任意類型的數據轉換成一個字符串
        // base64():進行編碼
        window.location.href = uri + base64(format(template, ctx))
    }
})()

html頁面:

<div>
    <div class="l-button" onclick="export_excel('tableExcel')">
        <div class="l-button-l"></div>
        <div class="l-button-r"></div>
        <span>導出Excel</span>
    </div>
    <div id="myDiv">
        <table id="tableExcel" width="100%" border="1" cellspacing="0" cellpadding="0">
            <thead>
                <tr>
                    <td>成功時間</td>
                    <td>訂單號</td>
                    <td>用戶ID</td>
                    <td>支付類型</td>
                    <td>訂單金額</td>
                    <td>道具名稱</td>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章