4

我创建了一个 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 行 x 48 列）

ps 我在谷歌浏览器中做所有这些，它允许文件上传。所以该解决方案应该可以在 Chrome 中运行。

4

2 回答 2

3

I've experienced this problem before and the solution I found was to use Blobs to download the CSV. Essentially, you turn the csv data into a Blob, then use the URL API to create a URL to use in the link, eg:

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

Blobs aren't supported in IE9, but if you just need Chrome support you should be fine.

于 2015-06-17T07:56:05.187 回答
0

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

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();
}
于 2015-06-19T09:11:47.210 回答