Buen día. Espero puedan ayduarme.
Tengo un documento en html que deseo convertir a pdf. El html es mas o menos así:
...
Código:
<body>
<div class="hoja_pdf pdf_0">...</div>
<div class="hoja pdf_1">...</div>
<div class="hoja pdf_2">...</div>
</body>
el numero de divs varía.
El problema que tengo es que a la hora de generarse el PDF no crea todas las páginas, se salta algunas. Esto varía cada vez que se crea el PDF, no siempre crea las mismas, pero casi nunca crea el documento completo. No soy experto en JS, el código es el siguiente:
Código:
var hpdf = null, doc =null;
$("#btn_pdf").on("click", function() {
doc = new jsPDF({
unit : 'in',
format : 'letter',
orientation : 'landscape'
});
$("body").scrollTop(0);
new Promise(function(done) {
doc_length = $(".hoja_pdf").length;
var imgs = new Array();
$.each($(".hoja_pdf"), function(x,y) {
hpdf = $(".pdf_" + x);
get_canvas().then(function(canvas) {
imgs[x] = canvas.toDataURL("image/png");
if (imgs[x] != null && x == (doc_length - 1) ) {
console.log("imagenes obtenidas")
done(imgs);
}
})
})
}).then(function(imgs) {
return new Promise(function (done) {
var total_imgs = imgs.length;
console.log(total_imgs);
console.log("Creando las páginas...");
for (i in imgs) {
console.log(i + " de " + total_imgs);
add_image(imgs[i], function () {
if (imgs[i] != null) {
if (i < (total_imgs - 1)) {
doc.addPage();
console.log("Hoja " + i + " añadida");
}
if (i == (total_imgs - 1)) {
console.log("Imagenes agregadas");
done("Proceso terminado");
}
} else {
console.log("No se pudo agregar la imagen, es nula")
}
});
}
});
}).then(function(msg) {
console.log(msg);
doc.save("generados.pdf");
})
});
function add_image(img,callback) {
if (img != null) {
doc.addImage({
imageData : img,
format : "JPEG",
x : 0.05,
y : 0.05
});
callback();
} else {
console.log("Error al agregar la imagen");
}
}
function get_canvas() {
hpdf.width(1010).css("max-width", "none");
hpdf.height(770);
return html2canvas(hpdf, { imageTimeout: 2000, remove: true});
}
De antemano gracias.
