html中使用javascript直接導出到Excel

html 端

<!-- 固定的格式導出使用 -->
<div class="modal-header" style="display: none">
    <div class="row">
        <div class="col-md-6">
            <h4 class="modal-title" id="myModalLabel"></h4>
        </div>
        <div class="col-md-4">
            <h4 class="modal-title" id="tipMessageLabel"></h4>
        </div>
        <div class="col-md-2">
            <a id="dlink" style="display: none;"></a>
        </div>
    </div>
</div>

<!--要導出的表格-->
<table class="layui-table" id="table"></table>



<!-- 導出按鈕-->
<input type="button" class="layui-btn" style="background-color:#438eb9" onclick="exportDataToExcel()"
                   href="javascript:;" value="導出"/>

js 端,當數據量很大的時候使用blob代替base64的url,測試過12M的Excel數據是可以支持導出的

    function exportDataToExcel() {
        var fileName;
        fileName = '問卷調查統計' + ".xls";
        var sheetName = 'sheet';
        tableToExcel("table", sheetName, fileName, "dlink");
    }

    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, sheetName, fileName, linkId) {
            if (!table.nodeType)
                table = document.getElementById(table);
            var ctx = {worksheet: sheetName || 'Worksheet', table: table.innerHTML}
            var dlinkInfo = document.getElementById(linkId);
            //dlinkInfo.href = uri + base64(format(template, ctx));
            var blob = new Blob([format(template, ctx)], {type: "application/vnd.ms-excel"});//大數據量使用base64的url會被阻斷改爲blob
            dlinkInfo.href = URL.createObjectURL(blob);
            dlinkInfo.download = fileName;
            dlinkInfo.click();
        }
    })();
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章