使用jquery ajax下载pdf文件

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 功能，请参阅此 enhancement request 和此 discussion

鉴于此，您有两种解决方案之一：

第一种解决方案，放弃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

对于那些寻求更现代方法的人，您可以使用

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

，以便让服务器知道它将收到的请求类型。

Answer 4

您可以通过创建 HTML a 标签，使用 JavaScript 轻松完成此操作：

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

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