javaScript导出excel表格，数据量过大导出失败问题

最新推荐文章于 2024-03-04 17:25:41 发布

byggchongya

最新推荐文章于 2024-03-04 17:25:41 发布

阅读量2.5k

点赞数

分类专栏：前端开发文章标签： javaScript导出excel表格

本文链接：https://blog.csdn.net/qq_31120499/article/details/103459260

版权

前端开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

javaScript导出excel表格（IE浏览器不兼容）

HTML

<a class="btn btn-primary pull-right ml15" onclick="tableToExcel()">导出</a>

<td style="width: 120px;" class="towDeci">12.0000</td>

<a id="dlink" style="display:none;"></a>

javaScript

//table td.towDeci{mso-number-format:"0\.00"}控制单元格样式小数点两位
    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]--><style type="text/css">table td,table th{border: .5px solid #666666;}table td.towDeci{mso-number-format:"0\.00"}</style></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, name, filename) {
            name = commStr.ywrq;
            filename = commStr.sftjb;
            table = "tableList";
            if (!table.nodeType) table = document.getElementById(table)
            var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML.replaceAll(">0.00<", "><")}
			//内容较少可以用这个
            //document.getElementById("dlink").href = uri + base64(format(template, ctx));

            //因为浏览器URL有长度限制,将excel数据转换成base64,数据量过大的时候长度超过浏览器GET限制,部分被阻断,识别不出来excel,下载失败
            //数据量过大的时候需要使用blob对象
            var blob = new Blob([format(template, ctx)], {type: "application/vnd.ms-excel"});
            document.getElementById("dlink").href = URL.createObjectURL(blob);

            document.getElementById("dlink").download = filename;
            document.getElementById("dlink").click();
        }
    })();

template中的样式table td.towDeci{mso-number-format:“0.00”}是为了控制导出的excel表格中单元格格式（数字格式），可以直接搜索mso-number-format:“0.00” 。table td,table th{border: .5px solid #666666;}设置导出excel表格单元格的边框线。
var ctx = {worksheet: name || ‘Worksheet’, table: table.innerHTML.replaceAll(">0.00<", “><”)}，是不显示表格中的"0.00"内容，设置为空，不需要此举的话，直接写成如下：

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

如果导出的表格标题居中，可以在caption标签中加h1标签，用样式控制h1标签：

<caption style="display:none;">
   <h1 style="font-size: 16px;font-weight: bold;color: #333333;" class="text-center">标题</h1>
</caption>

表格在html展示页面display:none;的元素导出excel表格会显示出来。

参考文档链接：https://segmentfault.com/q/1010000018237178

byggchongya

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaScript导出excel表格，数据量过大导出失败问题

javaScript下载excel表格HTML<a class="btn btn-primary pull-right ml15" onclick="tableToExcel()">导出</a><td style="width: 120px;" class="towDeci">12.0000</td><a id="dlink" st...
复制链接

扫一扫

专栏目录