Question

我创建了一个Web应用程序来清理CSV / TSV数据。该应用程序允许我上传CSV文件，读取，修复数据，然后下载包含正确数据的新CSV文件。我遇到的一个挑战是下载超过2500行的文件。浏览器崩溃并显示以下错误消息：

"Aw, Snap! Something went wrong while displaying this webpage..."

要解决这个问题，我已经更改了编程，下载了多个不超过2500行的CSV文件，直到下载完所有数据。然后，我将下载的CSV文件放在最终文件中。这不是我要找的解决方案。使用超过100,000行的文件，我需要将所有内容下载到1个文件中，而不是40个。我还需要一个前端解决方案。

以下是下载CSV文件的代码。我正在创建一个隐藏的链接，编码数据数组的内容（每个元素有1000行）并创建隐藏链接的路径。然后我触发点击链接开始下载。

var startDownload = function (data){
    var hiddenElement = document.createElement('a');
    var path = 'data:attachment/tsv,';
    for (i=0;i<data.length;i++){
        path += encodeURI(data[i]);
    }
    hiddenElement.href = path;
    hiddenElement.target = '_blank';
    hiddenElement.download = 'result.tsv';
    hiddenElement.click();
}

在我的情况下，上述过程一次适用于~2500行。如果我尝试下载更大的文件，浏览器会崩溃。我做错了什么，如何在不崩溃浏览器的情况下下载更大的文件？崩溃浏览器的文件有（12,000行乘48列）

P.S。我正在谷歌Chrome中完成所有这些工作，允许文件上传。所以解决方案应该适用于Chrome。

Answer 1

之前我遇到过这个问题，我找到的解决方案是使用Blob来下载CSV。基本上，您将csv数据转换为Blob，然后使用URL API创建要在链接中使用的URL，例如：

var blob = new Blob([data], { type: 'text/csv' });
var hiddenElement = document.createElement('a');
hiddenElement.href = window.URL.createObjectURL(blob);

Blob aren't supported in IE9，但如果您只需要Chrome支持，则应该没问题。

Answer 2

我也面临同样的问题。我使用这个代码，它会正常工作。你也可以试试这个。

if (window.navigator.msSaveBlob) {
    window.navigator.msSaveBlob(new Blob([base64toBlob($.base64.encode(excelFile), 'text/csv')]),'data.csv');
} else {
var link = document.createElement('a');
link.download = 'data.csv';
// If u use chrome u can use webkitURL in place of URL
link.href = window.URL.createObjectURL(new Blob([base64toBlob($.base64.encode(excelFile), 'text/csv')]));
link.click();
}

encodeURI文件下载 - 崩溃的浏览器

2 个答案: