个人中心
gpt4 book ai didi

javascript - 关于分页符，如何让 Puppeteer PDF 生成与 HTML 文档完全匹配？

转载 作者：行者123 更新时间：2023-12-03 12:10:50 25 4
gpt4 key购买 nike

我正在使用 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
});
同样的 HTML 也会显示给我的应用程序的前端用户，因此他们可以在下载 PDF 之前获得内容的准确预览。
为了匹配 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)
}
我面临的问题是关于分页符； Puppeteer 有时会将底部内容拆分为单独的页面。
例如，对于前端用户看到的 A4 页面表示的底部，这就是 HTML 的样子。
enter image description here
如您所见，底行文本显然有足够的空间容纳，它没有被切断。
但是，Puppeteer 会像这样打印 PDF:
enter image description here
即它将文本分成两个单独的页面。
这种行为似乎也很不稳定；我有时注意到(例如，具有不同的文本/段落长度)，它不会将内容分成单独的页面。
你知道 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 ... */
}
我稍微修改了他们的演示以包含您的 Lorem Ipsum 元素符号文本。可以@ http://jsfiddle.net/x7s2cntj/1/查看.
单击运行查看结果，或使用 puppeteer 在 headless chrome 中尝试.
我从堆栈溢出中删除了片段，因为似乎在片段窗口中应用了一些额外的 CSS。

关于javascript - 关于分页符，如何让 Puppeteer PDF 生成与 HTML 文档完全匹配？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65545690/

25 4 0
文章推荐： javascript - CDN 上的服务器端渲染问题
文章推荐： NHibernate:使用IList语义双向映射一对多
文章推荐： Spring集成测试与手动事务管理
文章推荐： javascript - 在同一进程中创建 "fresh and empty"Node.js JavaScript 上下文的最佳方法？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com