我可以在 HTML 打印中强制分页吗？

Question

我正在制作一个可打印的 HTML 报告，它有“部分”，应该从一个新页面开始。

有什么方法可以在 HTML/CSS 中放置一些东西，以通知浏览器它此时需要强制分页（开始一个新页面）？

我不需要它在那里的每个浏览器中工作，我想我可以告诉人们使用一组特定的浏览器来打印它。

Answer 1

添加一个名为“pagebreak”（或“pb”）的 CSS 类，如下所示：

@media print {
    .pagebreak { page-break-before: always; } /* page-break-after works, as well */
}

然后在您想要分页符的位置添加一个空的 DIV 标记（ 或任何生成框的块元素）。

<div class="pagebreak"> </div>

它不会显示在页面上，但会在打印时分解页面。

PS 也许这仅适用于使用-after （以及您可能对页面上的其他<div>执行的其他操作）时，但我发现我必须按如下方式增加 CSS 类：

@media print {
    .pagebreak {
        clear: both;
        page-break-after: always;
    }
}

Answer 2

试试这个链接

<style>
@media print
{
h1 {page-break-before:always}
}
</style>

Answer 3

只是想发布一个更新。 page-break-after现在是一个遗留属性。

官方页面说明

此属性已被break-after属性取代。

Answer 4

 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>

只需将它添加到您需要页面转到下一页的位置（文本“第 1 页”将在第 1 页上，文本“第 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)

Answer 5

您可以使用 CSS 属性page-break-before （或page-break-after ）。 只需设置page-break-before: always在那些应该从新行开始的块级元素（例如，标题、 div 、 p或table元素）上。

例如，要在任何 2 级标题之前和newpage类中的任何元素之前（例如， <div class=newpage> ...）导致换行，您可以使用

h2, .newpage { page-break-before: always }

Answer 6

试试这个（它适用于 Chrome、Firefox 和 IE）：

... content in page 1 ...
<p style="page-break-after: always;">&nbsp;</p>
<p style="page-break-before: always;">&nbsp;</p>
... content in page 2 ...

Answer 7

假设您有一个包含以下文章的博客：

<div class="article"> ... </div>

只需将此添加到 CSS 对我有用：

@media print {
  .article { page-break-after: always; }
}

（在 Chrome 69 和 Firefox 62 上测试和工作）。

参考：

• https://www.w3schools.com/cssref/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;符page-break-after: always; .

Answer 8

当我们在浏览器上使用打印命令时，我需要在每第三行后分页。

我加了

<div style='page-break-before: always;'></div>

在每第三行和我的父 div 之后display: flex; 所以我删除了display: flex; 它按我的意愿工作。

Answer 9

CSS

@media print {
  .pagebreak { 
     page-break-before: always; 
  }
}

HTML

<div class="pagebreak"></div>

Answer 10

我为此苦苦挣扎了一段时间，但从未奏效。

最后，解决方案是在头部放置一个样式元素。

page-break-after 不能在链接的 CSS 文件中，它必须在 HTML 本身中。

Answer 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 ”一个），在浏览器中，所有三个块依次出现。

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

Answer 13

下面的代码为我工作也有一些更多的例子 在这里

  <div style="page-break-inside:avoid;page-break-after:always">
  </div>

Answer 14

这似乎不适用于我的网站。 在输出x个div之后，我将使用分页符类来输出div标签，这样打印的页面就会“干净”地打破。 是的 - 我检查并重新检查了我的代码并在浏览器中查看了源页面。

Answer 15

@ Chris Doggett说得很有道理。 尽管如此，我在lvsys.com上发现了一个有趣的技巧，它实际上适用于 Firefox 和 chrome。 只需将此注释放在您希望插入分页符的任何位置即可。 您还可以用任何块元素替换<p>标签。

<p><!-- pagebreak --></p>