encodeURI文件下载-浏览器崩溃

encodeURI file download - crashing browser

本文关键字：崩溃 浏览器 文件下载 encodeURI      更新时间：2023-09-26

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

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

为了解决这个问题，我更改了程序，下载多个CSV文件，在下载所有数据之前，不超过2500行。然后我会把下载的CSV文件组合成一个最终文件。这不是我想要的解决方案。使用超过100000行的文件时，我需要下载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条线路。如果我试图下载更大的文件，浏览器就会崩溃。我做错了什么？如何在不破坏浏览器的情况下下载更大的文件？导致浏览器崩溃的文件具有（12000行乘48列）

附言：我是在谷歌浏览器中完成这一切的，它允许上传文件。因此，该解决方案应该在Chrome中运行。

我以前遇到过这个问题，我找到的解决方案是使用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);

IE9不支持Blob，但如果你只需要Chrome支持，你应该没问题。

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

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();
}
相关文章：