Scarica il file pdf utilizzando jquery ajax

Question

Voglio scaricare un file pdf per la risposta ajax jquery. La risposta Ajax contiene i dati del file pdf. Ho provato questo solution. Il mio codice è riportato di seguito, ma ottengo sempre un pdf vuoto.

$(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 ha alcuni problemi di caricamento dati binari utilizzando le richieste AJAX, in quanto non ha ancora implementare le funzionalità alcuni HTML5 XHR v2, vedere questo enhancement request e questo discussion

Dato che, si dispone di una delle due soluzioni:

Prima soluzione, abbandona JQuery e utilizzare XMLHTTPRequest

andare con la HTMLHTTPRequest nativo, ecco il codice per fare quello che bisogno

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

Seconda soluzione, usare il plugin jquery-ajax-native

Il plugin può essere trovato here e può essere utilizzato per le capacità XHR V2 mancanti in JQuery, ecco un codice di esempio come per usarlo

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

Sono novizio e la maggior parte del codice proviene da Google Search. Ho ottenuto il mio download di PDF funzionante con il codice qui sotto (versione di prova ed errore). Grazie per i suggerimenti sul codice (xhrFields) sopra.

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