JavaScriptで大きなファイルをダウンロードするには

Question

XMLHttpRequestまたはfetchを使用して大きなファイルをダウンロードする必要があります。ファイルをRAM-Memoryに保存しないでください。

リクエストのヘッダーにベアラートークンを送信する必要があるため、通常のリンクダウンロードは機能しません。

私はファイルをダウンロードすることができましたが、この「解決策」はファイルがRAM-Memoryに保存されてから保存ダイアログが表示されます。 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を持つ私の「ソリューション」です：

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

質問は、私はファイルが使用可能RAM、より大きなダウンロードすることができる方法であります - メモリと同時にヘッダを設定しますか？

Answer 1

StreamSaver.js（下のリンク）に記載されているように、ストリームを使用してこの問題を回避することができます。

StreamSaver.js（免責事項：私はそのレポの所有者ではありません）を試すことができます。ブラウザ間での互換性がないほど、あなたが望むものを解決しようとしています。現在のところ、Chrome +52とOpera +39だけがサポートしています。

また、FileSaver.js（免責事項：私はそのレポの所有者ではありません）が、現在実行しているのと同じ問題にぶつかります。