我在linux alpine上使用puppeteer生成pdf，我使用theadtbodytfoot技巧在每一页上得到合适的页眉和页脚。
我注意到chrome和chrome在打印时如何布局的一些奇怪行为。即，在呈现表格时跳过第一页。
这里有一个repro（在Ubuntu 18.04上测试了Chrome 73.0.3683.75，可能很重要，因为这个repro有点难以重新创建，字体渲染可能会影响布局）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
thead {
display: table-header-group;
}
tfoot {
display: table-footer-group;
}
table {
border-collapse: collapse;
}
html,
body,
table,
tr,
td {
margin: 0;
padding: 0;
border: none;
width: 100%;
}
</style>
</head>
<body>
<table>
<thead style="background:#fcc">
<tr>
<td>
<div style="height: 231px">head</div>
</td>
</tr>
</thead>
<tbody style="background:#cfc">
<tr>
<td>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
</td>
</tr>
<tr>
<td>widow</td>
</tr>
</tbody>
<tfoot style="background:#ccf">
<tr>
<td>
<div style="height:231px">foot</div>
</td>
</tr>
</tfoot>
</table>
</body>
</html>请注意，当加载这个页面并点击ctrl+p时，表格开始呈现在文档https://i.imgur.com/nFEl6XX.png的第二页上。我希望它从第一页开始呈现。是否有css规则可以实现这一点，比如page-break-inside: do-it-please-instead-of-messing-up-my-table？
编辑：忘记设置，使用边距None重现问题https://i.imgur.com/61gPr0o.png
还有一个不相干的问题：删除第二个表行<tr><td>widow</td></tr>会显示另一个意外的呈现伪影：https://i.imgur.com/lLpa4yH.png。在这里，tbody在第一页开始呈现，但将tfoot推到第二页。我希望tbody在这种情况下也中断。
2条答案
按热度按时间vom3gejh1#
已向chromium团队报告了一个错误：https://bugs.chromium.org/p/chromium/issues/detail?id=962435#c13
更新-现在标记为已修复（但尚未测试）：https://bugs.chromium.org/p/chromium/issues/detail?id=962435#c24
不幸的是（但也许并不令人惊讶），这并不是一个真正的优先事项。我最终用openhtmltopdf替换了puppeteer，后者处理运行的页眉和页脚更好一些。
还制作了一个 Package 器，以便人们可以在微服务环境中直接使用它：https://github.com/modfin/betterpress
ajsxfq5m2#
我们遇到了同样的问题。有一个很好的解决方法。只要你用一个行跨度创建一个td，它就能正常工作。请看下面的sniplet。