0
1.4K
Views¿Cómo hacer que la generación de PDF de Titiritero coincida exactamente con el documento HTML, en lo que respecta a los saltos de página?
Estoy usando Puppeteer para generar archivos PDF, usando HTML estático como fuente:
const page = await browser.newPage(); await page.setContent(html); //html is read in from the file system const pdf = await page.pdf({ format: 'A4', printBackground: true, preferCSSPageSize: true });El mismo HTML también se muestra a los usuarios front-end de mi aplicación, para que puedan obtener una vista previa exacta del contenido antes de descargar el PDF.
Para que coincida con el tamaño de una hoja de papel A4, estoy usando CSS para configurar la etiqueta <body> del HTML a un cierto ancho y alto, teniendo en cuenta los márgenes de página en el proceso.
Entonces, por ejemplo, mi CSS puede verse así:
@page { margin: 1cm; //tells Puppeteer to print the PDF with a 1cm margin } body { width: 19cm; // (21cm width minus 1cm margin on each side) height: 27.7cm // (29.7cm height minus 1cm margin top and bottom) }El problema al que me enfrento es con respecto a los saltos de página; Titiritero a veces divide el contenido inferior en páginas separadas.
Por ejemplo, así es como se ve el HTML, para la parte inferior de la representación de la página A4 que ve el usuario front-end.
Como puede ver, claramente hay suficiente espacio para que quepa la fila inferior de texto, no se corta.
Sin embargo, Puppeteer imprime el PDF así:
es decir, divide el texto en dos páginas separadas.
Este comportamiento también parece ser muy errático; He notado que a veces (por ejemplo, con diferentes longitudes de texto/párrafo), no divide el contenido en páginas separadas.
¿Tienes alguna idea de por qué Titiritero está dividiendo el texto? He revisado la documentación pero parece que no puedo encontrar ninguna solución para esto.
¡Gracias!
1 answers
Answer question0
El problema es que hay una discrepancia entre la configuración de CSS para el tamaño de página y el tamaño de página A4 que usa Chrome para imprimir.
Eche un vistazo a la siguiente pregunta/respuesta y específicamente a la configuración de CSS en la respuesta aprobada.
CSS para configurar el tamaño de papel A4
La solución propuesta es hacer uso también de la regla de los medios impresos .
Tienen una demo específica con el siguiente código:
@page { size: A4; margin: 0; } @media print { html, body { width: 210mm; height: 297mm; } /* ... the rest of the rules ... */ }Modifiqué ligeramente su demostración para incluir su texto con viñetas de Lorem Ipsum. Puede verlo @ http://jsfiddle.net/x7s2cntj/1/ .
Haz clic en Ejecutar para ver el resultado, o pruébalo en cromo sin cabeza usando puppeteer .
Eliminé el fragmento del desbordamiento de la pila porque parece que se está aplicando CSS adicional dentro de la ventana del fragmento.