4

I created a web application to clean up CSV/TSV data. The app allows me to upload a CSV file, read it, fix data, and then download a new CSV file with the correct data. One challenge I have run into is downloading files with more than ~ 2500 lines. The browser crashes with the following error message:

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

To work around this I have changed the programming to download multiple CSV files not exceeding 2500 lines until all the data is downloaded. I would then put together the downloaded CSV files into a final file. That's not the solution I am looking for. Working with files of well over 100,000 lines, I need to download all contents in 1 file, and not 40. I also need a front-end solution.

Following is the code for downloading the CSV file. I am creating a hidden link, encoding the contents of data array (each element has 1000 lines) and creating the path for the hidden link. I then trigger 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 lines at a time. If I attempt to download bigger files, the browser crashes. What am I doing wrong, and how can I download bigger files without crashing the browser? The file that is crashing the browser has (12,000 rows by 48 columns)

p.s. I am doing all of this in Google Chrome, which allows for file upload. So the solution should work in Chrome.

xited
  • 877
  • 1
  • 10
  • 19
  • Hi Xited, Did you find any solution. Bcz am also facing same problem. – Anil Talla Jun 10 '15 at 05:57
  • Are you trying to do the CSV cleanup entirely in the browser? If not, how come you're not POSTing the data to the server? – eddiewould Jun 10 '15 at 09:24
  • Possibly, take a look at http://www.gieson.com/Library/projects/utilities/opensave if you're trying to do it entirely in the browser – eddiewould Jun 10 '15 at 09:30
  • @eddiewould - there is no access to a server. CSV cleanup would have to take place inside the browser. – xited Jun 11 '15 at 19:20
  • @AnilTalla - a workaround to the above problem is to print the data in an HTML table, Select ALL and paste in Excel, then save as CSV. This approach fixes my problem, but it's nowhere close to an optimal solution. I want to download the CSV straight from the browser. – xited Jun 11 '15 at 19:28
  • Why do you particularly want to do it in web browser? Why not just a simple Python script or something like that? You say you don't have access to a server, why can't you run a web server on the same machine as the web browser? – eddiewould Jun 11 '15 at 20:14

2 Answers2

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.

tim
  • 110
  • 5
0

I also faced same problem. I used this code,it will works 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();
}
Anil Talla
  • 709
  • 5
  • 19