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を使用すると、2つのソリューションのいずれかを持っている、ということを考えると、このenhancement requestこのdiscussion

を参照してください、それはまだいくつかのHTML5 XHR v2の機能を実装していないとして、AJAX要求を使用してバイナリデータをロードするいくつかの問題があります。

まず溶液は、jQueryのを放棄し、ネイティブHTMLHTTPRequestとXMLHTTPRequestを

Go]を使用しては、ここで何をあなたを行うためのコードがあります使用し、プラグインがhereを見つけることができるとjQueryで行方不明XHRのV2の機能に使用することができます

のjquery-ajaxのネイティブプラグインを

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(); 

第二の溶液を必要とし、ここではサンプルコード方法がありますそれを使用する

$.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

私は初心者です。ほとんどのコードはgoogle検索からです。私は私のpdfのダウンロードを下のコードで試してみました（試行錯誤のプレイ）。上記のコードヒント（xhrFields）をありがとうございます。 jQuery.ajax ``のためXMLHttpRequest`を代入

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