Download file encodeURI - browser crash

Question

I created a web application for cleaning CSV / TSV data. The application allows you to download a CSV file, read it, correct the data, and then download a new CSV file with the correct data. One of the problems I have encountered is downloading files with over 2500 lines. The browser crashes with the following error message:

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

To get around this, I changed the program to download several CSV files, not exceeding 2500 lines, until all the data was downloaded. Then I would collect the downloaded CSV files into the final file. This is not the solution I'm looking for. When working with files with more than 100,000 lines, I need to load all the contents into 1 file, not 40. I also need to have an interface solution.

Below is the code to download the CSV file. I create a hidden link encoding the contents of the data array (each element has 1000 lines) and creates a path for the hidden link. Then I launch a click on the link to start the download.

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

In my case, the above process works for ~ 2500 rows at a time. If I try to download large files, the browser crashes. What am I doing wrong, and how can I upload large files without browser crashes? The file that the browser breaks has (12,000 rows in 48 columns)

ps I do all this in Google Chrome, which allows me to upload files. Therefore, the solution should work in Chrome.

Answer 1

I already ran into this problem, and the solution I found was to use Blob to load CSV. Essentially, you turn csv data into Blob, and then use the URL API to create the URL to use in the link, for example:

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

Blobs are not supported in IE9 , but if you just need Chrome support, you should be fine.

Answer 2

I also had the same problem. I used this code, it will work fine. You can also try this.

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