En la entrada de hoy te vamos a explicar como descargar un fichero PDF con jQuery y Ajax.
Para ponerte en contexto, el tema esta en que jQuery tiene algunos problemas a la hora de cargar datos binarios utilizando solicitudes Ajax. El motivo es que aún no implementa algunas capacidades HTML5 XHR v2.
Ante este problema, puede ser que te surgen dudas como:
¿Entonces que sucede si a través de una llamada Ajax quiero generar un PDF y posteriormente descargarlo?
¿No hay manera de lograrlo?
No te preocupes, con la programación se puede conseguir casi todo y en este caso no habrá una excepción :).
En este caso la solución está en hacer uso de «blob«.
A continuación te vamos a dar varias opciones para solucionar el problema sobre como descargar un fichero PDF con jQuery y Ajax:
OPCIÓN 1
$.ajax({
type: 'POST',
url: 'url_php_file_generate_pdf.php',
xhrFields: {
responseType: 'blob'
},
data: {
ajax: true,
variable1: "value",
variable2: "other value",
},
success: function (json) {
var a = document.createElement('a');
var url = window.URL.createObjectURL(json);
a.href = url;
a.download = 'your_pdf_name.pdf';
a.click();
window.URL.revokeObjectURL(url);
},
error: function() {
console.log("Error");
}
});
Para generar el PDF tienes que hacerlo en el fichero PHP que va a procesar la anterior petición Ajax. Puedes hacer uso de cualquier librería que se encargue de generar PDFs. En nuestro caso, una de nuestras preferidas es generar PDFs con la librería MPDF. Puedes encontrar toda la información necesaria en el siguiente enlace:
PROBLEMAS AL DESCARGAR UN FICHERO PDF CON LLAMADA AJAX Y BLOB
Si el anterior código te va bien en cualquier navegador y dispositivo pero te encuentras que con un dispositivo iOS no te puedes descargar el fichero PDF mediante la llamada Ajax y haciendo uso de blob, tendrás que hacer un pequeño ajuste al anterior código, quedando del siguiente modo:
$.ajax({
type: 'POST',
url: 'url_php_file_generate_pdf.php',
xhr: function(){
xhr = jQuery.ajaxSettings.xhr.apply(this, arguments);
return xhr;
},
xhrFields: {
responseType: 'blob'
},
data: {
ajax: true,
variable1: "value",
variable2: "other value",
},
success: function (json) {
var blobUrl = URL.createObjectURL(xhr.response);
var a = document.createElement('a');
$(a).attr({
href: blobUrl
, download: 'your_pdf_file.pdf'
}).text('Click here to download.');
document.body.appendChild(a);
a.click();
},
error: function() {
console.log("Error");
}
});
OPCIÓN 2
Esta opción es muy parecida a la anterior, pero se haría uso del plugin «native». Puedes encontrarlo en el siguiente enlace.
$.ajax({
dataType: 'native',
url: "/generatorpdf.pdf",
xhrFields: {
responseType: 'blob'
},
success: function(blob){
console.log(blob.size);
var link=document.createElement('a');
link.href=window.URL.createObjectURL(blob);
link.download="PDFname_" + new Date() + ".pdf";
link.click();
}
});
OPCIÓN 3
La última opción consiste en abandonar jQuery y hacer uso de XMLHTTPRequest. La manera de realizarlo sería la siguiente:
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();
No te olvides que también será necesario que programes el fichero PHP para generar el PDF. Como te comentábamos más arriba, se puede hacer mediante cualquier librería como puede ser la MPDF.
Si tienes problemas o no sabes como realizar esta parte no dudes en contactar con nosotros o dejar tu comentario para que te podamos ayudar.
Y hasta aquí llegaría nuestra explicación al problema de como descargar un fichero PDF con jQuery y Ajax.
Esperamos que te haya servido de ayuda y nos vemos a la próxima!!
hola estoy generando 4 archivos planos con php y ajax, pero crea los archivos directo en el servidor y quiero q se descarguen a mi pc local, pero no me funciona. me puedes ayudar ?
Buenos días Josue,
¿Nos podrías dar un poco más de información? ¿Estas usando alguna plataforma en concreto o es código a medida? ¿Nos podrías enviar ejemplos de lo que tienes echo actualmente?
Gracias,