JavaScript 上万条数据导出Excel文件页面卡死-优快云博客

项目中遇到JavaScript导出上万条数据到Excel的问题，导致浏览器卡死和文件导出失败。经过调试，发现由于数据量过大，var变量长度超出限制。通过参考网上的解决方案，解决了这一问题，具体解决办法见相关博客链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近项目要js实现将数据导出excel文件，网上很多插件实现~~那个开心呀，谁知道后面数据量达到上万条时出问题：浏览器不仅卡死，导出的excel文件一直提示网络失败。。。。

debug调试发现var excel拼接的table字符串，超出了var的长度限制；幸好网上有前辈的解决方案~~~膜拜ing

参考网址：https://blog.youkuaiyun.com/b7410852963/article/details/51197552

栗子：
html页面：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>js Blod 保存文件</title>
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
     <script type="text/javascript" src="tableExport.jquery.plugin.js"></script>      
</head>
<body>

<div id="app">
 <p>===========================================js Blod 保存文件========================================</p>
 <input type="button" id="savetext" value="Save" onclick="Save()"/> 
<p>====================================tableExport.jquery.plugin.js====================================</br></p>
 <input type="button" id="savetext" value="tableSave" onclick="Save1()"/> 
 
 <table id="tableID">
<thead>
<tr align="left">
<td>编号</td>
<td>名单</td>
<td>组ID</td>
<td>组名</td>
<td>类型</td>
<td>更新时间</td>
<td>更新者</td>
</tr>
</thead>
<tbody>
<tr align="left" >
<td style="vnd.ms-excel.numberformat:@">编号1</td>
<td style="vnd.ms-excel.numberformat:@">白名单1</td>
<td style="vnd.ms-excel.numberformat:@">组ID1</td>
<td style="vnd.ms-excel.numberformat:@">组名1</td>
<td style="vnd.ms-excel.numberformat:@">类型1</td>
<td style="vnd.ms-excel.numberformat:@">更新时间1</td>
<td style="vnd.ms-excel.numberformat:@">更新者1</td>
</tr>
<tr align="left" >
<td style="vnd.ms-excel.numberformat:@">编号2</td>
<td style="vnd.ms-excel.numberformat:@">名单2</td>
<td style="vnd.ms-excel.numberformat:@">组ID2</td>
<td style="vnd.ms-excel.numberformat:@">组名2</td>
<td style="vnd.ms-excel.numberformat:@">类型2</td>
<td style="vnd.ms-excel.numberformat:@">更新时间2</td>
<td style="vnd.ms-excel.numberformat:@">更新者2</td>
</tr>
</tbody>
</table>
 

</div>

<script type="text/javascript">
//tableExport.jquery.plugin.js
function Save1(){
$('#tableID').tableExport({type:'excel'});
}

//js Blod 保存文件
 function doSave(value, type, name) {  
    var blob;  
    if (typeof window.Blob == "function") {  
        blob = new Blob([value], {type: type});  
    } else {  
        var BlobBuilder = window.BlobBuilder || window.MozBlobBuilder || window.WebKitBlobBuilder || window.MSBlobBuilder;  
        var bb = new BlobBuilder();  
        bb.append(value);  
        blob = bb.getBlob(type);  
    }  
    var URL = window.URL || window.webkitURL;  
    var bloburl = URL.createObjectURL(blob);  
    var anchor = document.createElement("a");  
    if ('download' in anchor) {  
        anchor.style.visibility = "hidden";  
        anchor.href = bloburl;  
        anchor.download = name;  
        document.body.appendChild(anchor);  
        var evt = document.createEvent("MouseEvents");  
        evt.initEvent("click", true, true);  
        anchor.dispatchEvent(evt);  
        document.body.removeChild(anchor);  
    } else if (navigator.msSaveBlob) {  
        navigator.msSaveBlob(blob, name);  
    } else {  
        location.href = bloburl;  
    }  
}  
  
var a=new Array();  
for(var i=0;i<10;i++)  
a.push(i);  
  
function Save(){  
    doSave(a, "text/latex", "hello.txt");   
}  
</script>
</body>
</html>


tableExport.jquery.plugin.js

/*
 tableExport.jquery.plugin

 Copyright (c) 2015 hhurz, c
 Original work Copyright (c) 2014 Giri Raj, https://github.com/kayalshri/
 Licensed under the MIT License, http://opensource.org/licenses/mit-license
*/

(function ($) {
  $.fn.extend({
    tableExport: function (options) {
      var defaults = {
        consoleLog: false,
        csvEnclosure: '"',
        csvSeparator: ',',
        csvUseBOM: true,
        displayTableName: false,
        escape: false,
        excelstyles: ['border-bottom', 'border-top', 'border-left', 'border-right'],
        fileName: 'tableExport',
        htmlContent: false,
        ignoreColumn: [],
        ignoreRow:[],
        jspdf: {orientation: 'p',
                unit: 'pt',
                format: 'a4', // jspdf page format or 'bestfit' for autmatic paper format selection
                margins: {left: 20, right: 10, top: 10, bottom: 10},
                autotable: {styles: {cellPadding: 2,
                                     rowHeight: 12,
                                     fontSize: 8,
                                     fillColor: 255,        // color value or 'inherit' to use css background-color from html table
                                     textColor: 50,         // color