Javascript：导出大文本/csv 文件会使 Google Chrome 崩溃

Posted 2023-02-24

【中文标题】Javascript：导出大文本/csv 文件会使 Google Chrome 崩溃

【英文标题】：Javascript: Exporting large text/csv file crashes Google Chrome

【发布时间】：2014-06-11 15:51:30

【问题描述】：

我有以下 javascript 代码可以在客户端导出 CSV 文件。但是，每次我尝试导出大型数组时，谷歌浏览器都会崩溃。 Chrome 中允许的数据字符串的限制是多少？它是否有可能达到 Chrome 中允许的内存限制？如果 Chrome 的数据字符串太长，我将如何在客户端导出大型 CSV 文件？

var csvRows = [...]; //Array with 40000 items, each item is 100 characters long.

var csvString = csvRows.join("\r\n");

var a = document.createElement('a');

a.href        = 'data:text/csv;charset=utf-8,' + encodeURIComponent(csvString);
a.target      = '_blank';
a.download    = 'export.csv';

document.body.appendChild(a);
a.click();

（预计文件大小约为 6.4MB）

【参考方案1】：

遇到了同样的问题并使用Blob解决了它。

例如：

csvData = new Blob([csvString],  type: 'text/csv' ); 
var csvUrl = URL.createObjectURL(csvData);
a.href =  csvUrl;

来源： https://***.com/a/24611096/3048937

【讨论】：

我也有类似的问题，就是写excelbuilder.js的EB.createFile()函数创建的.xlsx文件数据。当表中有 8000 多条记录时，浏览器会崩溃。我正在尝试将其保存为 blob。但是，文件中写入的内容原来是 base64 字符串而不是 excel 文件数据。我尝试过不同类型的字符串。你有什么想法吗？

我也不知道为什么会这样。我之前用过encodeURI函数。

【参考方案2】：

我使用以下功能下载 CSV。在 IE/Firefox/Chrome 中为我工作

function downloadFile(data, fileName) 
        var csvData = data;
        var blob = new Blob([ csvData ], 
            type : "application/csv;charset=utf-8;"
        );

        if (window.navigator.msSaveBlob) 
            // FOR IE BROWSER
            navigator.msSaveBlob(blob, fileName);
         else 
            // FOR OTHER BROWSERS
            var link = document.createElement("a");
            var csvUrl = URL.createObjectURL(blob);
            link.href = csvUrl;
            link.style = "visibility:hidden";
            link.download = fileName;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        

【讨论】：

这与 Safari 兼容吗？ @Ganesh

没有用 Safari 测试过。

对于那些偶然发现这个问题的人，我在所有现代浏览器（不是 IE，而是 edge）中测试了这个解决方案，并且效果很好。