如何实现HTML报告中指定文本打印时不跨页？

要让表格和下方的文本在打印时保持在同一页，只需借助CSS的打印媒体查询和分页控制属性即可实现，具体修改如下：

步骤1：添加打印专属样式 #

在<style>标签中加入针对打印场景的CSS规则：

@media print {
  /* 禁止容器内内容跨页拆分 */
  .no-break-container {
    page-break-inside: avoid;
  }
}

步骤2：包裹需要保持同页的内容 #

把最后一个表格和需要同页的文本用上述类名的容器包裹：

<body>
Some text......

{DF.to_html()}

Some text.....

<!-- 包裹需要保持同页的表格和文本 -->
<div class="no-break-container">
  {DF.to_html()}
  Text that need to be on one page when printed
</div>
</body>

说明 #

• @media print仅对打印生效，不会影响网页的正常浏览效果。
• page-break-inside: avoid会让浏览器尽可能避免在容器内部拆分页面，优先保证表格和下方文本处于同一页。
• 如果表格本身长度超过单页容量，浏览器仍会拆分表格，但会尽量让表格的末尾部分和下方文本留在同一页。若强制表格完全不跨页，只能通过限制表格高度实现，但可能导致内容截断，不建议使用。

内容的提问来源于stack exchange，提问作者mlodycezar