Javascript: Eksportowanie dużego pliku tekstowego/pliku CSV powoduje awarię przeglądarki Google Chrome

Question

Mam następujący kod JavaScript, aby wyeksportować plik CSV po stronie klienta. Jednak Google Chrome zawiesza się za każdym razem, gdy próbuję wyeksportować dużą tablicę. Jaki jest limit dozwolonego ciągu danych w przeglądarce Chrome? Czy jest możliwe, że osiąga limit pamięci dozwolony w Chrome? Jeśli ciąg danych jest zbyt długi dla Chrome, w jaki sposób mam zamiar eksportować duże pliki CSV po stronie klienta?

var csvRows = [...]; //Array with 40000 items, each item is 100 characters long. 

var csvString = csvRows.join("\r\n"); 

var a = document.createElement('a'); 

a.href  = 'data:text/csv;charset=utf-8,' + encodeURIComponent(csvString); 
a.target  = '_blank'; 
a.download = 'export.csv'; 

document.body.appendChild(a); 
a.click(); 

(Oczekiwany rozmiar pliku wynosi około 6.4MB)

Answer 1

miał ten sam problem i rozwiązać go za pomocą Blob.

Na przykład:

csvData = new Blob([csvString], { type: 'text/csv' }); 
var csvUrl = URL.createObjectURL(csvData); 
a.href = csvUrl; 

Źródło: https://stackoverflow.com/a/24611096/3048937

Answer 2

użyłem następujących funkcji, aby pobrać plik CSV. Pracował dla mnie w IE/Firefox/Chrome

function downloadFile(data, fileName) { 
     var csvData = data; 
     var blob = new Blob([ csvData ], { 
      type : "application/csv;charset=utf-8;" 
     }); 

     if (window.navigator.msSaveBlob) { 
      // FOR IE BROWSER 
      navigator.msSaveBlob(blob, fileName); 
     } else { 
      // FOR OTHER BROWSERS 
      var link = document.createElement("a"); 
      var csvUrl = URL.createObjectURL(blob); 
      link.href = csvUrl; 
      link.style = "visibility:hidden"; 
      link.download = fileName; 
      document.body.appendChild(link); 
      link.click(); 
      document.body.removeChild(link); 
     } 
}