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

【问题标题】：Puppeteere/Chromium pdf printing ignores css page-breaks in tablesPuppeteere/Chromium pdf 打印忽略表格中的 css 分页符
【发布时间】：2019-12-01 10:14:28
【问题描述】：

过去几个小时我一直在浏览最新的 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）后来我们发现：在表格的所有标签上放一个“显示：块”就可以解决问题。也许这对某人有帮助。有什么相关的吗？

<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>

标签： printing chromium page-break

【解决方案1】：

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

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

==> 没有分页符

设置 2) 将 thead 设置为“display: table-header-group;”并将 tbody 设置为“table-row-group”，则 chrome 将忽略分页符。

==>每页没有表头

setup 3) 有thead: "display: table-header-group;"并且 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>

【讨论】：