從ajax響應下載pdf文件

Question

我試圖讓瀏覽器下載從 ajax 響應中收到的 pdf 文件。

受使用 jquery ajax 下載 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) {
            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。 當我嘗試在最后兩個瀏覽器中觸發它時沒有任何反應。

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

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

Answer 1

此版本適用於所有現代瀏覽器：

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 版本，但效果不佳。 將嘗試繼續調查它並為此提供解決方案。

Answer 2

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

是的，我可以為您提供一個在 Windows 10 上使用 IE11、Firefox 47 和 Chrome 52 進行測試的解決方案。目前沒有針對 Microsoft Edge 的解決方案。

一開始需要區分是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 3

下載文件的非常簡單的方法...

 $.ajax({
        url:"{{url('.......')}}/"+customerOrderId,
        type:'post',
        data:{"_token":"{{csrf_token()}}"},
        success:function(e){
            console.log(e.file);
            var link = document.createElement('a');
            link.href = e.file;
            link.download = "invoice_"+customerOrderId+"_" + new Date() + ".pdf";
            link.click();
            link.remove()

        },
        error:function(e){
            alert('Something went wrong!');
        }
    });