Télécharger le fichier pdf en utilisant jquery ajax

Je veux télécharger un fichier pdf pour la réponse de jquery ajax. La réponse Ajax contient des données de fichier pdf. J'ai essayé cette solution . Mon code est donné ci-dessous, mais je reçois toujours un pdf vierge.

$(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 a des problèmes pour charger des données binaires à l'aide de requêtes AJAX, car il ne met pas encore en œuvre certaines fonctionnalités HTML5 XHR v2, voir cette demande d'amélioration et cette discussion

Compte tenu de cela, vous avez une de deux solutions:

Première solution, abandonner JQuery et utiliser XMLHTTPRequest

Allez avec le code HTMLHTTPRequest natif, voici le code pour faire ce dont vous avez besoin

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

Deuxième solution, utilisez le plugin jquery-ajax-native

Le plugin peut être trouvé ici et peut être utilisé pour les capacités XHR V2 manquantes dans JQuery, voici un exemple de code pour l'utiliser

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

Je suis débutant et la plupart du code provient de la recherche Google. J'ai eu mon téléchargement de pdf en utilisant le code ci-dessous (jeu d'essai et d'erreur). Merci pour les astuces de code (xhrFields) ci-dessus.

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