天天看點

js導出頁面表格資料到Excel

1.解決了無法自定義Excel檔案名的問題

2.解決了界面身份證号碼等比較長的數字導出Excel後成科學計數法的問題。

3.相容常見浏覽器

function exportToExcel(tableid,filename,sheetname){  

    if(getExplorer()=='ie'){

        var curTbl = document.getElementById(tableid);  

        var oXL = new ActiveXObject("Excel.Application");  

        var oWB = oXL.Workbooks.Add();  

        var xlsheet = oWB.Worksheets(1);  

        var sel = document.body.createTextRange();  

        sel.moveToElementText(curTbl);  

        sel.select();  

        sel.execCommand("Copy");  

        xlsheet.Paste();  

        oXL.Visible = true;    

        try{  

            var fname = oXL.Application.GetSaveAsFilename(filename, "Excel Spreadsheets (*.xls), *.xls");  

        } catch (e){  

            print("Nested catch caught " + e);  

        } finally {  

            oWB.SaveAs(fname);  

            oWB.Close(savechanges = false);  

            oXL.Quit();  

            oXL = null;  

            idTmr = window.setInterval("Cleanup();", 1);  

        }  

    }else{  

        tableToExcel(tableid,filename,sheetname)  

    }  

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)));

    },

    format = function (s, c){

    return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }); 

    };

    return function (table,filename,sheetname){

//這裡建立一個<a/>标記利用a标記的download屬性來自定義Excel檔案名,解決button按鈕觸發下載下傳無法自定義Excel檔案名的問題

    var a = $('<a id="dlink" style="display:none;"/>');

        $(document.body).append(a);

        if (!table.nodeType) table = document.getElementById(table);

        var ctx = { worksheet: sheetname || 'Worksheet', table: table.innerHTML }

        a.attr("href",uri + base64(format(template, ctx)));

        a.attr("download",filename);//這裡是關鍵所在,當點選之後,設定a标簽的屬性,這樣就可以更改excel檔案的名字了

        document.getElementById("dlink").click();

    }

})();

<script type="text/javascript">

        $(document).ready(function () {  

            $(function(){

                $('#btnExport').on('click', function(){

                exportToExcel('contentTable','測試1','xxxxx等等x');

                });

            });

        });

</script>

注意:利用 <td style="mso-number-format:'\@';"> 處理 界面身份證号碼等比較長的數字導出Excel後成科學計數法的問題。

參考文檔

1.http://blog.csdn.net/nihaoqiulinhe/article/details/53065005

2.http://blog.csdn.net/nihaoqiulinhe/article/details/53537540

繼續閱讀