encodeURI 파일 다운로드 - 브라우저가 충돌 함

Question

CSV/TSV 데이터를 정리하는 웹 응용 프로그램을 만들었습니다. 이 앱을 사용하면 CSV 파일을 업로드하고 읽고 데이터를 수정 한 다음 정확한 데이터가 포함 된 새 CSV 파일을 다운로드 할 수 있습니다. 제가 직면 한 한가지 도전 과제는 ~ 2500 라인이 넘는 파일을 다운로드하는 것입니다. 브라우저는 다음과 같은 오류 메시지와 함께 충돌 :

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

이 문제를 해결하기 위해 나는 모든 데이터가 다운로드 될 때까지 여러 CSV 2500 선을 초과하지 않는 파일을 다운로드하는 프로그램을 변경했습니다. 그런 다음 다운로드 한 CSV 파일을 최종 파일로 정리합니다. 그건 내가 원하는 해결책이 아니야. 10 만 줄이 넘는 파일로 작업 할 때는 40 개가 아닌 1 개의 파일로 모든 내용을 다운로드해야합니다. 프런트 엔드 솔루션도 필요합니다.

다음은 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 x 48 행)

p.s. Google 크롬에서 파일 업로드가 가능한 모든 작업을 수행하고 있습니다. 따라서 솔루션은 Chrome에서 작동해야합니다.

Answer 1

이전에이 문제가 발생했으며 해결책은 Blob을 사용하여 CSV를 다운로드하는 것이 었습니다.

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

물방울 aren't supported in IE9,하지만 당신은 단지 크롬 지원을 필요로하는 경우 당신은 괜찮을 것 : 기본적으로, 당신은 예를 들어, 링크에 사용할 URL을 만들 수 URL API를 사용하여 다음의 Blob에 CSV 데이터를 설정합니다.

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