编码URI文件下载-浏览器崩溃

Question

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

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

为了解决这个问题，我已经改变了编程方式，下载多个不超过2500行的CSV文件，直到所有数据都下载完毕。然后，我会将已下载的CSV文件合并成一个最终文件。但这不是我要寻找的解决方案。因为我需要处理超过100,000行的文件，所以需要将所有内容下载到一个文件中，而不是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列）。

附言：我在谷歌浏览器中完成所有操作，该浏览器支持文件上传。因此，解决方案应适用于谷歌浏览器。

- xited

---

你好Xited，你找到解决方案了吗？因为我也遇到了同样的问题。 - Anil Talla

你是想在浏览器中完全进行CSV清理吗？如果不是，为什么不将数据POST到服务器上呢？ - eddiewould

如果你想完全在浏览器中实现，可以参考http://www.gieson.com/Library/projects/utilities/opensave。 - eddiewould

@eddiewould - 没有访问服务器的权限。CSV清理必须在浏览器内进行。 - xited

@AnilTalla - 对于上述问题的解决方法是将数据打印在HTML表格中，选择全部并粘贴到Excel中，然后保存为CSV。这种方法解决了我的问题，但远非最佳解决方案。我想直接从浏览器下载CSV文件。 - xited

你为什么特别想在 web 浏览器中做它？为什么不只是一个简单的 Python 脚本或类似的东西？你说你没有服务器访问权限，为什么不能在同一台机器上运行 Web 服务器和 Web 浏览器？ - eddiewould

Answer 1

我以前遇到过这个问题，找到的解决方法是使用Blob来下载CSV文件。基本上，你需要将CSV数据转换为Blob对象，然后使用URL API创建一个链接地址，例如：

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

IE9不支持Blobs（二进制大对象），但如果你只需要Chrome支持，那么应该没问题。

- tim

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();
}

- Anil Talla