Puppeteere/Chromium pdf 打印忽略表格中的 css 分页符

Question

最近几个小时我一直在浏览最新的 puppeteer (2.0.0)/chromium 78.0.x 来解决我的问题，以使我们的打印系统正常工作。 我们允许在表格中设置分页符，这在 PhantomJS 渲染器中可以找到，但不能在 puppeteer/chromium 解决方案中找到。

除了全局 css 和打印 PDF 页眉/页脚的许多细微差别之外，表格的打印是最后一个问题（希望如此）。

事实证明，“page-break-before: always”被简单地忽略了。

例子：

<table>
   <thead> ... </thead>
   <tbody> ... 
       <tr style="page-break-before: always;"> ...should be on next page ... </tr>
   </tbody>
</table>

Chrome 论坛的一些文章指出，这个已经解决了。 所以问题是是什么导致了问题。

问候， 安德烈

PS）后来我们现在发现：在表格的所有标签上放一个“display:block”就解决了问题。 也许这对某人有帮助。 对此有何评论？

<table style="display: block;">
   <thead style="display: block;"> ... </thead>
   <tbody style="display: block;"> ... 
       <tr style="display: block; page-break-before: always;"> ...is now on the next page ... </tr>
   </tbody>
</table>

Answer 1

我们上面提供的解决方案的坏消息。 这破坏了在每个页面上都有表头的特性。

设置 1) 设置“显示：块；” for thead将禁用在每个页面上都有表格标题的功能。

==> 没有分页符

设置2）设置THEAD为“显示：表头的基团;” 并将 tbody 设置为“table-row-group”，那么 chrome 将忽略分页符。

==> 每页没有表格标题

设置 3）有标题：“显示：表头组；” 和 tbody: "display: block" 正在破坏列结构。 主体将仅在第一列上呈现。

==> 破坏桌子。 身体就在第一列

这是我们解决问题的技巧。 我们使用设置 3，其中： - 我们构建一个只有一列的表 - 该列包含一个包含我们真正想要渲染的所有列的表 - 列宽设置为固定值（无论如何在我们的渲染系统中就是这种情况)

<table>
  <thead>
     <tr>
        <td> <table> .... the header of the real table  </table> </td>
     </tr>
  </thead>


  <tbody style="display:block;">
     <tr>
        <td>
            <table> .... one row of the real table  </table>
        <td>
     </tr>

     <tr>
        <td>
            <table> .... another row of the real table  </table>
        <td>
     </tr>

  </tbody>
</table>