JavaScript로 큰 파일을 다운로드하는 방법

Question

RAM 메모리에 파일을 저장하지 않고 XMLHttpRequest 또는 fetch을 사용하여 큰 파일을 다운로드해야합니다.

요청 헤더에 무기명 토큰을 보내야하므로 정상적인 다운로드 링크가 작동하지 않습니다.

파일을 다운로드 할 수 있었지만이 "솔루션"은 저장 대화 상자가 나타나기 전에 파일을 RAM 메모리에 먼저 저장하므로 파일이 커질수록 브라우저가 중단됩니다 RAM 메모리.

 var myHeaders = new Headers(); 
     myHeaders.append('Authorization', `Bearer ${token}`); 

     var myInit = { method: 'GET', 
      headers: myHeaders, 
      mode: 'cors', 
      cache: 'default' }; 
     var a = document.createElement('a'); 

     fetch(url,myInit) 
      .then((response)=> { 
       return response.blob(); 
      }) 
      .then((myBlob)=> { 
       a.href = window.URL.createObjectURL(myBlob); 
       var attr = document.createAttribute("download"); 
       a.setAttributeNode(attr); 
       a.style.display = 'none'; 
       document.body.appendChild(a); 
       a.click(); 
       a.remove(); 
      }); 

을 그리고 여기 XMLHttpRequest를 내 "솔루션"입니다 : 여기

내 "솔루션"을 페치되어 사용 가능한 RAM 다음

 var xhttp = new XMLHttpRequest(); 
     xhttp.onreadystatechange =()=>{ 
      if (xhttp.readyState == 4){ 
       if ((xhttp.status == 200) || (xhttp.status == 0)){ 
        var a = document.createElement('a'); 
        a.href = window.URL.createObjectURL(xhttp.response); // xhr.response is a blob 
        var attr = document.createAttribute("download"); 
        a.setAttributeNode(attr); 
        a.style.display = 'none'; 
        document.body.appendChild(a); 
        a.click(); 
        a.remove(); 
       } 
      } 
     }; 
     xhttp.open("GET", url); 
     xhttp.responseType = "blob"; 
     xhttp.setRequestHeader('Authorization', `Bearer ${token}`); 
     xhttp.send(); 

문제는 어떻게 다운로드 할 수 큰 파일 - 메모리와 같은 시간에 헤더를 설정?

Answer 1

StreamSaver.js (아래 링크)에 나와있는 것처럼이 문제를 해결하기 위해 스트림을 사용할 수 있습니다.

시도해 볼 수 있습니다 StreamSaver.js (면책 조항 : 해당 repo 소유자가 아닙니다). 브라우저 간 호환이되지 않는 범위에서 원하는 것을 해결하는 것 같습니다. 현재는 Chrome +52 및 Opera +39에서만 지원됩니다.

(면책 조항 : 해당 repo 소유자가 아닙니다.)하지만 현재 실행중인 것과 동일한 문제가 발생합니다.