從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。當我嘗試在最後兩個瀏覽器中觸發它時，沒有任何反應。

腳本和標記被放置在iframe中，由於從CMS繼承，但我不知道是否有任何影響的。

如何優化它爲所有現代瀏覽器的任何想法？

Answer 1

如何優化它爲所有現代瀏覽器的任何想法？

是的，我可以給你一個在IE10，Firefox47和Chrome52上測試的解決方案。

在你需要的，如果你是在IE或其他兩款瀏覽器來區分的開始。這是因爲在IE11可以使用：

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

對於其他兩款瀏覽器的代碼適用於Chrome而不是Firefox的，因爲你沒有的元素追加到文檔體。

所以更正後的代碼是：

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

我嘗試也獲得了Safari瀏覽器版本，但它沒有工作這麼好。將嘗試繼續調查併爲此提供解決方案。