css 防止puppeteer pdf中的分页符

zengzsys  于 2023-01-22  发布在  其他
关注(0)|答案(1)|浏览(164)

我有html像

<table>
<tbody></tbody>
</table>

此模板正在转换为PDF格式与 puppet ,我的表格数据是跨两个页面分割,但我不希望表格数据跨页面分割
我已经尝试了所有的解决方案,所以这个问题https://github.com/puppeteer/puppeteer/issues/6366,但我仍然无法找到解决方案,我已经尝试了page-break-inside:avoid in tbody/tr它不工作,我知道这个css工程的块级元素,所以我已经尝试了 Package 表在div和应用的css在div上仍然表是在页面中中断请帮助,如果你有任何解决方案

lp0sw83n

lp0sw83n1#

首先,你需要为print生成pdf文件,使用以下方法:

await page.emulateMediaType('print');

这将允许您使用css(如break-before)来控制打印内容的呈现,更多信息请参见此处:https://developer.mozilla.org/en-US/docs/Web/CSS/Paged_Media

答案

您有多个解决方案,因此:

  • 如果你的表足够小,你可以把它放在一个页面上,用一个css规则,比如style="page-break-before: always",来确保它从一个新的页面开始。
  • 如果你的表格太长(大多数情况下是动力学表格),生成打印的pdf会在每一页上重复表格标题,所以pdf仍然是可读的。如果你需要确保一些元素组会保持在一起,你可以应用css规则,就像我们上面看到的。

这可能是一个艰苦的工作,以获得精确的渲染与 puppet 师,但 puppet 师可能是最好的做这件事,现在。

相关问题