PDF 字体大小问题使用 HTML 和 Puppeteer

Question

我正在尝试使用 HTML 在浏览器（chrome v8）中生成一个 PDF，方法是将其发送给 puppeteer。 html 是使用 ejs 生成的，因为 PDF 的某些部分有动态内容。动态内容包括图像、html 表格（行数和列数是动态的）和文本。

在 HTML 中，我在样式标签中定义了 css 来格式化内容。

虽然字体大小似乎来自样式标签 - 整个内容似乎正在为某些内容组合进行压缩/收缩。 看起来一个 PDF 内容是在 100% 缩放（正常大小）时生成的，另一个是在 80% 缩放（所有内容看起来都更小）时生成的。

我尝试删除 img 标签（没有给出额外的 CSS 样式）——这解决了数据组合的问题。

此外，在某些情况下，右侧的内容会被剪切——我曾尝试为 html 中的 body 标签提供 100% 的宽度，但这并没有解决问题。

在浏览器中查看 EJS 生成的 HTML 作为纯 HTML 文件 - 显示 PDF 显示大小变化的情况之间没有区别。

解决此问题的任何指示将不胜感激。

字体大小设置为

* {
    Font-size: 16px;
}

Puppeteer 代码片段如下：

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);

Answer 1

晚了..但要解决

此外，在某些情况下，右侧的内容会被剪切——我曾尝试为 html 中的 body 标签提供 100% 的宽度，但这并没有解决问题。

在页面中使用低于宽度的选项。pdf 选项

var maxWidth = await page.evaluate(() => Math.max(document.body.scrollWidth, document.documentElement.clientWidth));