javascript - 使用 jquery ajax 下载 pdf 文件

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

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