Télécharger le fichier pdf en utilisant jQuery ajax
je souhaite télécharger un fichier pdf pour jQuery ajax response. La réponse d'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 vide 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();
});
});
2 réponses
jQuery a quelques problèmes chargement de données binaires en utilisant des requêtes AJAX, comme il ne met pas encore en œuvre certaines capacités HTML5 XHR v2, voir ce demande d'amélioration et ce discussion
étant donné que, vous avez l'une des deux solutions:
première solution, abandonner JQuery et utiliser XMLHTTPRequest
va avec la HTMLHTTPRequest native, voici le code pour faire ce que vous avez besoin de
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 jquery-ajax-natif plugin
le plugin peut être trouvé ici et peut être utilisé pour les capacités XHR V2 manquantes dans JQuery, voici un exemple de code comment 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 internaute novice et la plupart du code est de google search. J'ai obtenu mon téléchargement pdf travailler avec le code ci-dessous (Jeu d'essai et d'erreur). Merci pour les conseils 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]*=((['"]).*?|[^;\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);
}
}
});