javascript – 使用jquery ajax下载pdf文件

前端之家收集整理的这篇文章主要介绍了javascript – 使用jquery ajax下载pdf文件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想下载一个pdf文件jquery ajax响应. 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();
    });


});

解决方法

jQuery在使用AJAX请求加载二进制数据时有一些问题,因为它还没有实现一些HTML5 XHR v2功能,请参阅这个 enhancement requestdiscussion

鉴于此,您有两个解决方案之一:

第一个解决方案,放弃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();
  }
});
原文链接:https://www.f2er.com/ajax/152591.html

猜你在找的Ajax相关文章