encodeURI file download - crashing browser

Question

Я создал веб-приложение для очистки данных CSV/TSV. Приложение позволяет загружать CSV-файл, читать его, исправлять данные, а затем загружать новый CSV-файл с правильными данными. Одна из проблем, с которыми я столкнулся, - это загрузка файлов с более чем 2500 строк. Браузер аварий со следующим сообщением об ошибке:

"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. Я делаю все это в Google Chrome, что позволяет загружать файлы. Поэтому решение должно работать в Chrome.

Answer 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); 

Blobs aren't supported in IE9, но если вам просто нужно Chrome поддержку, которую вы должны быть хорошо.

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