ajaxレスポンスからPDFファイルをダウンロード

Question

私は、ブラウザにajaxレスポンスからダウンロードしたpdfファイルをダウンロードさせようとしています。 Download pdf file using jquery ajaxに触発

私はこのようなクリック/ダウンロードイベントシミュレート：

var req = new XMLHttpRequest(); 
    req.open("POST", "/servicepath/Method?ids=" + ids, true); 
    req.responseType = "blob"; 
    req.onreadystatechange = function() { 
     if (req.readyState === 4 && req.status === 200) { 
      var blob = req.response; 
      var link = document.createElement('a'); 
      link.href = window.URL.createObjectURL(blob); 
      link.download = "PdfName-" + new Date().getTime() + ".pdf"; 
      link.click(); 
     } 
    }; 
    req.send(); 

残念ながら、これだけChromeで動作しますが、ないのFirefox + IEを。私は最後の2つのブラウザでそれを起動しようとすると何も起こりません。

スクリプトとマークアップは、CMSからの継承のためにiframe内に配置されますが、影響があるかどうかはわかりません。

現代のすべてのブラウザでどのように最適化するのですか？

Answer 1

現代のすべてのブラウザでどのように最適化するのですか？

はい、IE11、Firefox 47、およびChrome 52でWindows 10でテストしたソリューションを提供できます。現時点ではMicrosoft Edgeはありません。

あなたがIEまたは他の2つのブラウザにいるかどうかを区別する必要があります。これは、IE11であなたが使用することができます：あなたは、文書本体に要素を追加していなかったので、あなたのコードは、Chromeでなく、Firefoxの上で動作し、他の2つのブラウザのために

window.navigator.msSaveBlob(req.response, "PdfName-" + new Date().getTime() + ".pdf"); 

を。

ので、修正されたコードは次のとおりです。あなたはすべてのエラーを

var req = new XMLHttpRequest(); 
req.open("POST", "/servicepath/Method?ids=" + ids, true); 
req.responseType = "blob"; 
req.onreadystatechange = function() { 
    if (req.readyState === 4 && req.status === 200) { 

    // test for IE 

    if (typeof window.navigator.msSaveBlob === 'function') { 
     window.navigator.msSaveBlob(req.response, "PdfName-" + new Date().getTime() + ".pdf"); 
    } else { 
     var blob = req.response; 
     var link = document.createElement('a'); 
     link.href = window.URL.createObjectURL(blob); 
     link.download = "PdfName-" + new Date().getTime() + ".pdf"; 

     // append the link to the document body 

     document.body.appendChild(link); 

     link.click(); 
    } 
    } 
}; 
req.send(); 

Answer 2

このバージョンでは、すべての最新ブラウザで動作します：

var req = new XMLHttpRequest(); 
req.open("POST", "/servicepath/Method?ids=" + ids, true); 
req.responseType = "blob"; 
req.onreadystatechange = function() { 
    if (req.readyState === 4 && req.status === 200) { 
     var filename = "PdfName-" + new Date().getTime() + ".pdf"; 
     if (typeof window.chrome !== 'undefined') { 
      // Chrome version 
      var link = document.createElement('a'); 
      link.href = window.URL.createObjectURL(req.response); 
      link.download = "PdfName-" + new Date().getTime() + ".pdf"; 
      link.click(); 
     } else if (typeof window.navigator.msSaveBlob !== 'undefined') { 
      // IE version 
      var blob = new Blob([req.response], { type: 'application/pdf' }); 
      window.navigator.msSaveBlob(blob, filename); 
     } else { 
      // Firefox version 
      var file = new File([req.response], filename, { type: 'application/force-download' }); 
      window.open(URL.createObjectURL(file)); 
     } 
    } 
}; 
req.send(); 

また、私はサファリのバージョンを取得しようとしていたが、それはとてもうまく動作しませんでした。それを調査して解決策を提供しようとします。