我正在使用 Puppeteer 生成 PDF 文件，使用静态 HTML 作为源:
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
});
为了匹配 A4 纸的大小，我使用 CSS 来设置
<body> HTML 的标签到一定的宽度和高度，在处理过程中占页边距。例如，我的 CSS 可能如下所示:
@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)
}
例如，对于前端用户看到的 A4 页面表示的底部，这就是 HTML 的样子。
如您所见，底行文本显然有足够的空间容纳，它没有被切断。
但是，Puppeteer 会像这样打印 PDF:
即它将文本分成两个单独的页面。
这种行为似乎也很不稳定；我有时注意到(例如，具有不同的文本/段落长度)，它不会将内容分成单独的页面。
你知道 Puppeteer 为什么要拆分文本吗？我已经浏览了文档，但似乎找不到任何解决方案。
谢谢!
最佳答案
问题是页面大小的 CSS 设置与 chrome 用于打印的 A4 页面大小不匹配。
查看以下问题/答案，特别是已批准答案中的 CSS 设置。
CSS to set A4 paper size
建议的解决方案是同时使用 print media rule .
他们有一个带有以下代码的特定演示:
@page {
size: A4;
margin: 0;
}
@media print {
html, body {
width: 210mm;
height: 297mm;
}
/* ... the rest of the rules ... */
}
单击运行查看结果，或使用
puppeteer 在 headless chrome 中尝试.我从堆栈溢出中删除了片段，因为似乎在片段窗口中应用了一些额外的 CSS。
关于javascript - 关于分页符，如何让 Puppeteer PDF 生成与 HTML 文档完全匹配？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65545690/