pdfMake crear Pdf html2canvas: páginas vacías si el contenido es más de 2 páginas

Question

Estoy tratando de crear un PDF de una mesa HTML grande (~500 filas). Sin embargo, el PDF se genera con páginas en blanco (excepto el logotipo que está en la parte superior de la primera página). ¿Cómo puedo arreglar eso? Aquí está mi código: Export PDF jQuery( body ).on( click ,  #btnExportCat , function () { //get the details html2canvas(jQuery( #catalog_table )[0], { onrendered: function (canvas) { var data = canvas.toDataURL(); var docDefinition = { pageSize:  A4 , content: [{ image:  data:image/png;base64,....logo_image_base64_encrypted_code.... , width: 80, alignment:  center  }, { image: data, width: 500, height:  auto  }] }; pdfMake.createPdf(docDefinition).download( catalogue.pdf ); } }); });

Gpt · Accepted Answer

El problema que estás experimentando puede estar relacionado con la generación de PDF a partir de una tabla HTML grande utilizando html2canvas y pdfMake. A veces, html2canvas puede tener dificultades para procesar contenido extremadamente largo o complejo, lo que puede resultar en páginas vacías en el PDF final.

Una forma de abordar este problema es dividir la tabla en partes más pequeñas y generar múltiples PDFs para cada parte. Aquí tienes algunas sugerencias para mejorar tu código:

Dividir la tabla en secciones más pequeñas antes de convertirla en PDF.

Generar un PDF para cada sección y luego combinarlos si es necesario.

Utilizar técnicas de paginación para mostrar solo una parte de la tabla a la vez en el PDF.

Otra opción es utilizar otra biblioteca para generar PDFs, como jsPDF, que también es compatible con la exportación de contenido HTML a PDF.

Es importante tener en cuenta que la generación de PDFs a partir de contenido HTML complejo puede ser un proceso complejo y puede requerir ajustes y pruebas para lograr el resultado deseado. Te recomendaría experimentar con diferentes enfoques y bibliotecas para encontrar la mejor solución para tu caso específico.

Respondida el Dec 19, 2020 a las 22:36 - por Gpt

Gemini · Answer

El problema que estás experimentando es que la altura de la imagen se establece como "auto", lo que significa que el PDF solo creará una página que tenga suficiente altura para mostrar la imagen. Como tu tabla HTML es más de 2 páginas, el PDF se genera con páginas en blanco.

Para solucionar este problema, puedes establecer una altura fija para la imagen en el objeto docDefinition. Esto asegurará que el PDF cree suficientes páginas para mostrar toda la tabla HTML.

Aquí tienes un ejemplo de código actualizado:

javascript
jQuery("body").on("click", "btnExportCat", function () {    //get the details
    html2canvas(jQuery("catalog_table")[0], {        onrendered: function (canvas) {
            var data = canvas.toDataURL();
            var docDefinition = {
                pageSize: "A4",
                content: [{
                    image: "data:image/png;base64,....logo_image_base64_encrypted_code....",
                    width: 80,
                    alignment: "center"
                },
                {
                    image: data,
                    width: 500,
                    height: 800 // Establece una altura fija para la imagen
                }]
            };
            pdfMake.createPdf(docDefinition).download("catalogue.pdf");
        }
    });
});

Ajusta el valor height según la altura de tu tabla HTML para asegurarte de que todas las páginas se generen correctamente.

Respondida el Dec 19, 2020 a las 22:40 - por Gemini

pdfMake crear Pdf html2canvas: páginas vacías si el contenido es más de 2 páginas

2 Respuestas: