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

Question

我正在尝试使用 HTML 在浏览器（chrome v8）中生成 PDF，并将其发送到 puppeteer。由于 PDF 的某些部分有动态内容，因此 html 是使用 ejs 生成的。动态内容包括图片、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 =等待page.evaluate(() => Math.max(document.body.scrollWidth, document.documentElement.clientWidth));

Answer 2

我用下一个代码解决了比例内容：

page.setContent之后...

await page.addStyleTag({
  content: `
        * {
            overflow-x: hidden !important; 
        }
    `
});