Estoy tratando de generar un PDF en el navegador (chrome v8) usando HTML enviándolo al titiritero. El html se genera usando ejs ya que hay contenido dinámico para algunas de las secciones del PDF. El contenido dinámico incluye imágenes, tablas html (la cantidad de filas y columnas son dinámicas) y texto.

En el HTML he definido css dentro de la etiqueta de estilo para formatear el contenido.

Si bien el tamaño de fuente parece provenir de la etiqueta de estilo, todo el contenido parece estar comprimido/contraído para algunas combinaciones de contenido. Parece que un contenido PDF se generó con un zoom del 100 % (tamaño normal) y el otro con un zoom del 80 % (donde todo parece más pequeño).

Intenté eliminar las etiquetas img (no se proporciona un estilo CSS adicional), eso resolvió el problema de la combinación de datos.

Además, el contenido de la derecha se corta en algunos casos: he intentado darle a la etiqueta del cuerpo en el html un ancho del 100%, pero eso no ha resuelto el problema.

Ver el HTML generado por EJS en el navegador como un archivo HTML puro no muestra ninguna diferencia entre los casos en los que el PDF muestra un cambio de tamaño.

Cualquier sugerencia para resolver esto sería apreciada.

El tamaño de fuente se establece como

 * { Font-size: 16px; }

Los fragmentos de código del titiritero se dan a continuación:

 const browser = await puppeteer.launch({ args: ['--no-sandbox'], headless: true }); await page.setContent(bodyHtml, { waitUntil: 'networkidle0' }); var options = { headerTemplate: headerHtmlWithStyles, footerTemplate: footerHtmlWithStyles, displayHeaderFooter: true, margin: { top: "195px", right: "64px", bottom: "100px", left: "64px" }, printBackground: false, path: pdfPath, format: 'A4', preferCSSPageSize: false } await page.emulateMediaType("screen"); await page.pdf(options);