使用jquery ajax下载pdf文件

小编典典

使用jquery ajax下载pdf文件

javascript

我想下载一个jQueryajax响应的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();
    });


});

阅读 2377

2020-05-01

共1个答案

小编典典

jQuery使用AJAX请求加载二进制数据时存在一些问题，因为它尚未实现某些HTML5 XHRv2功能

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

第一个解决方案是放弃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中缺少的XHRV2功能，这是如何使用它的示例代码

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

2020-05-01