encodeURI文件下载 - 崩溃的浏览器

Question

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)

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

Answer 1

I've experienced this problem before and the solution I found was to use Blob s 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.

Answer 2

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