クロスブラウザ対応のJavaScriptを使用したPDFのダウンロード

Question

ChromeのAngularJSを使用してPDFをダウンロードできますが、最新のFireFox、Internet Explorer 11またはEdgeでは動作していません（IE10では動作しないものとします）。いずれか）、私はshim is needed for IE9を知っています。誰にでも意見がある場合、これが最高のシムであるかどうかは分かりませんが、現在は動作していないようです。私はblobとarraybufferという応答タイプで試してみましたが、それは違いがある場合に備えてありました。

このすべてのカウンタは、caniuseがBlob URLの使用について示しているものです。誰もがこれをIE9以上で動作させていますし、FFの最後のカップルバージョンで、私が間違っていることを指摘できますか？

$http({ 
    url: '/api/v1/download', 
    method: 'GET', 
    responseType: 'blob' // or 'arraybuffer' 
}).then(function (response) { 

    // Use the Blob object to create an object URL to download the file 
    var url = URL.createObjectURL(response.data); 
    // var url = URL.createObjectURL(new Blob([response], {type: 'application/pdf'})); // arraybuffer version 

    // Create an anchor to perform download, but don't append to the DOM 
    anchor.href = downloadUrl; 
    anchor.download = filename; 
    anchor.target = '_blank'; 
    anchor.click(); 

    URL.revokeObjectURL(downloadUrl);    
    anchor = null; 

}).catch(function (reason) { 

    console.log('FAIL', reason); 
}); 

UPDATE

は現在最高の（唯一の）答えはIE10、11、エッジ、FFのために働く、とChromeで動作するように続けます。誰かが別のpolyfill/shim/other/etcを持っていて、Safariがダウンロード属性をサポートしていない場合、IE9はこのソリューションを使用して動作しません。そのため、現在のページをリダイレクトするだけで、どちらの場合も、私はTODOスタブを残しました。

これは、使用したり、うまくいけば期待ほどIE9とSafariの仕事に追加する人のためのコメントで追加されより多くの情報を掲載答えのアップデートです：私は両方で成功でこれを使用しました

function performDownload(blob, filename) { 

     // IE9 has no API for handling downloads using Blob objects, and doesn't support the download attribute 
     if(isIE() == 9) { 

      // TODO: polyfill/shim/other... change response type to? 
     } 
     // Only works for IE10 and up, including Edge 
     else if (typeof window.navigator.msSaveBlob !== 'undefined') { 

      // Provides a prompt to save the file to a location of users choice 
      window.navigator.msSaveBlob(blob, filename); 
     } 
     // Browsers that adhere to current standards can implement downloads 
     // using the Blob object with the download anchor attribute 
     // --- 
     // NOTE: Edge 13+ is compliant with both these standards, but Edge 12 
     // does not support the download anchor attribute so all versions 
     // have been grouped to use the propriety `msSaveBlob` method 
     else { 

      // Use the Blob object to create an object URL to download the file 
      var URL = window.URL; 
      var downloadUrl = URL.createObjectURL(blob); 

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

      if(angular.isDefined(anchor.download)) { 

       anchor.href = downloadUrl; 
       anchor.download = filename; 
       anchor.target = '_blank'; 
       document.body.appendChild(anchor); // Required by Firefox 
       anchor.click(); 

       // Release the existing object URL, and the anchor 
       $timeout(function() { 
        URL.revokeObjectURL(downloadUrl); 
        document.body.removeChild(anchor); 
        anchor = null; 
       }, 100); 
      } 
      else { 

       // TODO: Safari does not support the download anchor attribute... 
      } 
     } 
    } 

Answer 1

IE11とChrome：

function saveBlob(response, contentType, filename) { 
    let blob = new Blob([response.arrayBuffer()], { type: contentType }); 
    if (typeof window.navigator.msSaveBlob !== 'undefined') { 
     // IE workaround 
     window.navigator.msSaveBlob(blob, filename); 
    } else { 
     let URL = window.URL; 
     let downloadUrl = URL.createObjectURL(blob); 
     if (filename) { 
      let a = document.createElement('a'); 
      if (typeof a.download === 'undefined') { 
       window.location.href = downloadUrl; 
      } else { 
       a.href = downloadUrl; 
       a.download = filename; 
       document.body.appendChild(a); 
       a.click(); 
      } 
     } else { 
      window.location.href = downloadUrl; 
     } 
     // cleanup 
     setTimeout(function() { URL.revokeObjectURL(downloadUrl); }, 100); 
    } 
}