使用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

围棋与本地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本地插件

该插件可以发现here，可用于对XHR V2能力，JQuery的缺失，这里是一个示例代码如何使用它

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