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

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 = '{table}
'
, 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

你可能感兴趣的:(前端开发)