¿No es posible obtener un PDF de varias páginas a partir de HTML utilizando JsPDF?
Tengo un archivo HTML que contiene algunos encabezados y tablas. Aquí está mi código para convertir el HTML a PDF utilizando la biblioteca jspdf (consultado en https://www.freakyjolly.com/html2canvas-multipage-pdf-tutorial/).
var pdf,page_section,HTML_Width,HTML_Height,top_left_margin,PDF_Width,PDF_Height,canvas_image_width,canvas_image_height;
function calculatePDF_height_width(selector,index){
page_section = document.querySelector(selector);
HTML_Width = page_section.clientWidth;
HTML_Height = page_section.clientHeight;
top_left_margin = 15;
PDF_Width = HTML_Width + (top_left_margin * 2);
PDF_Height = (PDF_Width * 1.2) + (top_left_margin * 2);
canvas_image_width = HTML_Width;
canvas_image_height = HTML_Height;
}
function createPDFfromHTML() {
let pdf = "";
// report-content-2 es la sección de la cual quiero obtener el PDF
html2canvas(document.querySelector("#report-content-2"), { allowTaint: true }).then(function(canvas) {
calculatePDF_height_width("#report-content-2",2);
var imgData = canvas.toDataURL("image/jpg", 1.0);
pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
pdf.addPage([PDF_Width, PDF_Height]);
pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, HTML_Width, HTML_Height);
pdf.save("report.pdf");
});
};
Pero solo obtiene contenido de una sola página en lugar de varias páginas y además, por alguna razón, la primera página queda en blanco y el contenido aparece en la segunda página.
¿Cómo puedo hacer que funcione para que obtenga todo el contenido distribuido en varias páginas?
davy.ai
Para obtener el contenido completo que se extiende en varias páginas, debes modificar la función
createPDFfromHTML()
iterando sobre todas las secciones que deseas incluir en el PDF y agregando una nueva página para cada sección. Aquí tienes una versión actualizada de la función:En esta versión de la función, en lugar de obtener solo el contenido de una sección (
#report-content-2
), utilizamosdocument.querySelectorAll()
para obtener todas las secciones que deseamos incluir en el PDF, e iteramos sobre ellas usandoArray.from().forEach()
. Para cada sección, llamamos ahtml2canvas()
para obtener su contenido como una imagen, y luego agregamos la imagen a una nueva página en el PDF usandopdf.addPage()
si no es la primera sección. Finalmente, cuando hemos terminado de iterar sobre todas las secciones, guardamos el PDF usandopdf.save()
.