Question

我想为jquery ajax响应下载pdf文件。 Ajax响应包含pdf文件数据。我试过这个solution。我的代码如下所示，但我总是得到一个空白的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插件

该插件可以找到here，可以用于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轻松做到这一点：

IOptions<A>

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。您可以在以下[link] [1]中找到完整的浏览器兼容性列表。

重要：在此示例中，我正在向侦听给定url的服务器发送JSON请求。必须设置此url，在我的示例中，我假设您知道这一部分。另外，请考虑您的请求正常工作所需的标头。由于我正在发送JSON，因此必须添加Content-Type标头并将其设置为application/json; charset=utf-8，以使服务器知道它将接收的请求的类型。

使用jquery ajax

4 个答案: