2014-09-23 235 views
4

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

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

要解决这一点,我已经改变了编程下载多个CSV文件不超过2500线,直到所有的数据被下载。然后我会将下载的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中运行。

+0

Hi Xited,你找到任何解决方案。 Bcz也面临同样的问题。 – 2015-06-10 05:57:06

+0

你是否试图完全在浏览器中进行CSV清理?如果没有,你怎么不把数据发布到服务器上? – eddiewould 2015-06-10 09:24:57

+0

可能的话,看看http://www.gieson.com/Library/projects/utilities/opensave,如果你试图完全在浏览器中完成 – eddiewould 2015-06-10 09:30:58

回答

1

我以前遇到过这个问题,我发现的解决方案是使用Blob s来下载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); 

斑点aren't supported in IE9,但如果你只需要浏览器的支持,你应该罚款。

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