html中使用javascript直接导出到Excel

最新推荐文章于 2024-07-30 09:30:00 发布

闲不住的程序员

最新推荐文章于 2024-07-30 09:30:00 发布

阅读量392

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/abc8125/article/details/103661068

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

闲不住的程序员

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
html中使用javascript直接导出到Excel

html 端<！-- 固定的格式导出使用 --><div class="modal-header" style="display: none"> <div class="row"> <div class="col-md-6"> <h4 class="modal-title" id="myMod...
复制链接

扫一扫