es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿No es posible obtener un PDF de varias páginas a partir de HTML utilizando JsPDF?

31 Jul, 2023 Programación

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?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    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:

    function createPDFfromHTML() {
  let pdf = ""
  // report-content-2 es la sección para la que quiero obtener el PDF
  const sections = document.querySelectorAll(".report-section")

  // iteramos sobre todas las secciones y las agregamos al PDF
  Array.from(sections).forEach((section, index) => {
    html2canvas(section, { allowTaint: true }).then(function(canvas) {

      calculatePDF_height_width(`#${section.id}`, index);

      var imgData = canvas.toDataURL("image/jpg", 1.0);
      pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
      // agregamos una nueva página para cada sección después de la primera
      if (index > 0) pdf.addPage([PDF_Width, PDF_Height]);

      pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, HTML_Width, HTML_Height);

      // si esta es la última sección, guardamos el PDF
      if (index === sections.length - 1) pdf.save("report.pdf");
    });
  })
};

    En esta versión de la función, en lugar de obtener solo el contenido de una sección (#report-content-2), utilizamos document.querySelectorAll() para obtener todas las secciones que deseamos incluir en el PDF, e iteramos sobre ellas usando Array.from().forEach(). Para cada sección, llamamos a html2canvas() para obtener su contenido como una imagen, y luego agregamos la imagen a una nueva página en el PDF usando pdf.addPage() si no es la primera sección. Finalmente, cuando hemos terminado de iterar sobre todas las secciones, guardamos el PDF usando pdf.save().

Comments are closed.