使用 jquery 下載 pdf 文件 ajax

Question

我想為 jquery ajax 響應下載一個 pdf 文件。 Ajax 響應包含 pdf 個文件數據。 我試過這個解決方案。 我的代碼在下面給出，但我總是得到一個空白 pdf。

$(document).on('click', '.download-ss-btn', function () {

    $.ajax({
        type: "POST",
        url: 'http://127.0.0.1:8080/utils/json/pdfGen',
        data: {
            data: JSON.stringify(jsonData)
        }

    }).done(function (data) {
        var blob = new Blob([data]);
        var link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = "Sample.pdf";
        link.click();
    });


});

Answer 1

jQuery 在使用 AJAX 請求加載二進制數據時存在一些問題，因為它還沒有實現一些 HTML5 XHR v2 功能，請參閱此增強請求和此討論

鑒於此，您有以下兩種解決方案之一：

第一種解決方案，放棄JQuery，使用XMLHTTPRequest

使用本機 HTMLHTTPRequest，這是執行您需要的代碼

  var req = new XMLHttpRequest();
  req.open("GET", "/file.pdf", true);
  req.responseType = "blob";

  req.onload = function (event) {
    var blob = req.response;
    console.log(blob.size);
    var link=document.createElement('a');
    link.href=window.URL.createObjectURL(blob);
    link.download="Dossier_" + new Date() + ".pdf";
    link.click();
  };

  req.send();

第二種解決方案，使用jquery-ajax-native插件

該插件可以在這里找到並且可以用於 JQuery 中缺少的 XHR V2 功能，這里是如何使用它的示例代碼

$.ajax({
  dataType: 'native',
  url: "/file.pdf",
  xhrFields: {
    responseType: 'blob'
  },
  success: function(blob){
    console.log(blob.size);
      var link=document.createElement('a');
      link.href=window.URL.createObjectURL(blob);
      link.download="Dossier_" + new Date() + ".pdf";
      link.click();
  }
});

Answer 2

我是新手，大部分代碼來自谷歌搜索。 我使用下面的代碼下載了我的 pdf 文件（試錯游戲）。 感謝您提供上面的代碼提示 (xhrFields)。

$.ajax({
            cache: false,
            type: 'POST',
            url: 'yourURL',
            contentType: false,
            processData: false,
            data: yourdata,
             //xhrFields is what did the trick to read the blob to pdf
            xhrFields: {
                responseType: 'blob'
            },
            success: function (response, status, xhr) {

                var filename = "";                   
                var disposition = xhr.getResponseHeader('Content-Disposition');

                 if (disposition) {
                    var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
                    var matches = filenameRegex.exec(disposition);
                    if (matches !== null && matches[1]) filename = matches[1].replace(/['"]/g, '');
                } 
                var linkelem = document.createElement('a');
                try {
                                           var blob = new Blob([response], { type: 'application/octet-stream' });                        

                    if (typeof window.navigator.msSaveBlob !== 'undefined') {
                        //   IE workaround for "HTML7007: One or more blob URLs were revoked by closing the blob for which they were created. These URLs will no longer resolve as the data backing the URL has been freed."
                        window.navigator.msSaveBlob(blob, filename);
                    } else {
                        var URL = window.URL || window.webkitURL;
                        var downloadUrl = URL.createObjectURL(blob);

                        if (filename) { 
                            // use HTML5 a[download] attribute to specify filename
                            var a = document.createElement("a");

                            // safari doesn't support this yet
                            if (typeof a.download === 'undefined') {
                                window.location = downloadUrl;
                            } else {
                                a.href = downloadUrl;
                                a.download = filename;
                                document.body.appendChild(a);
                                a.target = "_blank";
                                a.click();
                            }
                        } else {
                            window.location = downloadUrl;
                        }
                    }   

                } catch (ex) {
                    console.log(ex);
                } 
            }
        });

Answer 3

你可以很容易地用 html5 做到這一點：

var link = document.createElement('a');
link.href = "/WWW/test.pdf";
link.download = "file_" + new Date() + ".pdf";
link.click();
link.remove();

Answer 4

對於那些尋求更現代方法的人，您可以使用fetch API 。 以下示例顯示了如何下載PDF文件。 使用以下代碼可以輕松完成。

fetch(url, {
    body: JSON.stringify(data),
    method: 'POST',
    headers: {
        'Content-Type': 'application/json; charset=utf-8'
    },
})
.then(response => response.blob())
.then(response => {
    const blob = new Blob([response], {type: 'application/pdf'});
    const downloadUrl = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = downloadUrl;
    a.download = "file.pdf";
    document.body.appendChild(a);
    a.click();
})

我相信這種方法比其他XMLHttpRequest解決方案更容易理解。 此外，它具有與jQuery方法類似的語法，無需添加任何額外的庫。

當然，我建議檢查您正在開發的瀏覽器，因為這種新方法不適用於 IE。 您可以在以下 [鏈接][1] 中找到完整的瀏覽器兼容性列表。

重要提示：在本例中，我向偵聽給定url的服務器發送 JSON 請求。 這個url必須設置，在我的例子中，我假設你知道這部分。 此外，請考慮您的請求工作所需的標頭。 由於我發送的是 JSON，因此我必須添加Content-Type標頭並將其設置為application/json; charset=utf-8 application/json; charset=utf-8 ，以便讓服務器知道它將收到的請求類型。

Answer 5

嘗試這個：

$(document).on('click', '.download-ss-btn', function () {

    $.ajax({
        type: "POST",
        url: 'http://127.0.0.1:8080/utils/json/pdfGen',
        data: {
            data: JSON.stringify(jsonData)
        },
        headers: {
            'Content-Type': 'application/json; charset=utf-8'
        }

    }).done(function (data) {
        let binaryString = window.atob(data);
        let binaryLen = binaryString.length;
        let bytes = new Uint8Array(binaryLen);

        for (let i = 0; i < binaryLen; i++) {
            let ascii = binaryString.charCodeAt(i);
            bytes[i] = ascii;
        }
        var blob = new Blob([data], {type: "application/pdf"});
        var link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = "Sample.pdf";
        link.click();
    });
});