jquery AJAX

Question

का उपयोग कर पीडीएफ फ़ाइल डाउनलोड करें मैं jquery AJAX प्रतिक्रिया के लिए एक पीडीएफ फ़ाइल डाउनलोड करना चाहता हूं। अजाक्स प्रतिक्रिया में पीडीएफ फाइल डेटा है। मैंने इस solution की कोशिश की। मेरा कोड नीचे दिया गया है लेकिन मुझे हमेशा एक खाली पीडीएफ मिलता है।

$(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 अनुरोध का उपयोग कर, के रूप में यह अभी तक कुछ एचटीएमएल 5 एक्सएचआर 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 पाया जा सकता है और एक्सएचआर 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

मैं नौसिखिया हूं और अधिकांश कोड Google खोज से है। मुझे नीचे दिए गए कोड (परीक्षण और त्रुटि प्ले) के साथ काम करने वाला मेरा पीडीएफ डाउनलोड मिला। उपरोक्त कोड युक्तियों (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); 
       } 
      } 
     });