我可以在 HTML 打印中强制分页吗？
Posted
技术标签:
【中文标题】我可以在 HTML 打印中强制分页吗？【英文标题】：Can I force a page break in HTML printing? 【发布时间】：2010-12-12 10:50:58 【问题描述】：我正在制作一个可打印的 html 报告，它的“部分”应该从新页面开始。
有什么方法可以在 HTML/CSS 中添加一些内容，向浏览器发出信号，表明它此时需要强制分页（开始一个新页面）？
我不需要在所有浏览器中都使用它，我想我可以告诉人们使用一组特定的浏览器来打印它。
【问题讨论】：
【参考方案1】：添加一个名为“pagebreak”（或“pb”）的 CSS 类，如下所示：
@media print
.pagebreak page-break-before: always; /* page-break-after works, as well */
然后在需要分页符的位置添加一个空的 DIV 标记 (or any block element that generates a box)。
<div class="pagebreak"> </div>
它不会显示在页面上，但会在打印时打破页面。
附：也许这只适用于使用-after 时（以及您可能对页面上的其他<div>s 所做的其他事情），但我发现我必须按如下方式扩充CSS 类：
@media print
.pagebreak
clear: both;
page-break-after: always;
【讨论】：
但是就像 CSS 中的所有好东西一样，这并不总是能始终如一地工作，所以测试一下它的生活日光，以免你有愤怒的用户想知道为什么你的网站打印成堆的额外空白页！ 根据 MDN，page-break-after“适用于生成框的块元素”，因此使用空的 <span> 元素将不起作用。将其应用于您的一段内容是一个更好的主意。见developer.mozilla.org/en-US/docs/Web/CSS/page-break-after
@nullability：很好。在我以前的工作中，我主要在 WinForms 中的 WebBrowser 控件中使用它，该控件使用 IE，这是遵循标准的黄金标准。
这在 Chrome 中对我不起作用...我正在尝试在 试试这个link
<style>
@media print
h1 page-break-before:always
</style>
【讨论】：
我认为这是一个更好的答案，因为它不涉及破坏 HTML 以实现视觉效果。 我实际上更喜欢另一个，因为它给了我更多的控制权。我总是可以将“分页符”类分配给应该使页面跳转的 H1。但这仍然是一个很好的解决方案。为@media +1，虽然我猜屏幕应该忽略page-break-before。谢谢！ h1 是可以用作打印中断标记的示例。您可以在其中替换和标记您喜欢的名称。你也可以使用 page-break-after:alwaysh1 不是一个很好的例子，因为它表示一级标题，而一个页面通常应该只有一个这样的标题。
如果你想跳过第一页的第一个页眉，试试h1:not(:first-child) page-break-before:always; 【参考方案3】：
First page (scroll down to see the second page)
<div style="break-after:page"></div>
Second page
<br>
<br>
<button onclick="window.print();return false;" />Print (to see the result) </button>只需在需要跳转到下一个页面的位置添加此内容（文本“page 1”将位于第 1 页，文本“page 2”将位于第二页）。
Page 1
<div style='break-after:always'></div>
Page 2
这也有效：
First page (there is a break after this)
<div style="break-after:page"></div>
Second page (This will be printed in the second page)
【讨论】：
page-break-after 已被break-after 取代，参考这里：link。【参考方案4】：
只是想更新一下。 page-break-after 现在是旧版属性。
官方page状态
此属性已被break-after 属性替换。
【讨论】：
需要注意的是，这个属性只有微软IE和Edge浏览器支持。 caniuse.com/…【参考方案5】：您可以使用 CSS 属性 page-break-before（或 page-break-after）。只需在应该从新行开始的那些块级元素（例如，标题、div、p 或 table 元素）上设置 page-break-before: always。
例如，要在任何 2 级标题之前和 newpage 类中的任何元素（例如，<div class=newpage>...）之前导致换行，您可以使用
h2, .newpage page-break-before: always
【讨论】：
【参考方案6】：试试这个（它在 Chrome、Firefox 和 IE 中工作）：
... content in page 1 ...
<p style="page-break-after: always;"> </p>
<p style="page-break-before: always;"> </p>
... content in page 2 ...
【讨论】：
【参考方案7】：假设您的博客包含这样的文章：
<div class="article"> ... </div>
只需将其添加到 CSS 中即可：
@media print
.article page-break-after: always;
（在 Chrome 69 和 Firefox 62 上测试并运行）。
参考：
https://www.w3schools.com/cs-s-ref/pr_print_pageba.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after ;重要提示：这里说的是This property has been replaced by the break-after property.，但break-after 对我不起作用。此外，关于 break-after 的 MDN 文档似乎并不特定于分页符，所以我更喜欢保留（工作）page-break-after: always;。
【讨论】：
【参考方案8】：CSS
@media print
.pagebreak
page-break-before: always;
HTML
<div class="pagebreak"></div>
【讨论】：
【参考方案9】：当我们在浏览器上使用打印命令时，我需要在每 3 行后换一个分页符。
我加了
<div style='page-break-before: always;'></div>
在每第三行之后，我的父 div 有 display: flex;
所以我删除了display: flex;，它可以正常工作。
【讨论】：
【参考方案10】：我为此苦苦挣扎了一段时间，它从来没有奏效。
最后解决的办法是在头部放一个样式元素。
page-break-after 不能在链接的 CSS 文件中，它必须在 HTML 本身中。
【讨论】：
在 html 中的<style> 头中，或者它应该内联在要应用 page-break-after 的元素中。【参考方案11】：
我们可以在要在 html页面。 “page-break-before”也有效
例子：
HTML_BLOCK_1
<p style="page-break-after: always"></p>
HTML_BLOCK_2
<p style="page-break-after: always"></p>
HTML_BLOCK_3
在使用上述代码打印 html 文件时，打印预览将显示三个页面（每个 html 块 "HTML_BLOCK_n" 一个），在浏览器中，所有三个块依次出现另一个。
【讨论】：
【参考方案12】：First page (scroll down to see the second page)
<div style="break-after:page"></div>
Second page
<br>
<br>
<button onclick="window.print();return false;" />Print (to see the result) </button>【讨论】：
【参考方案13】：以下代码对我有用，还有更多示例Here
<div style="page-break-inside:avoid;page-break-after:always">
</div>
【讨论】：
【参考方案14】：@Chris Doggett 非常有意义。
虽然，我在lvsys.com 上发现了一个有趣的技巧，它实际上适用于 Firefox 和 chrome。只需将此评论放在您想要插入分页符的任何位置。您还可以将<p> 标记替换为任何块元素。
<p><!-- pagebreak --></p>
【讨论】：
以上是关于我可以在 HTML 打印中强制分页吗？的主要内容，如果未能解决你的问题，请参考以下文章