我可以在 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>

不会出现在页面上，但打印时会打散页面

附言也许这只适用于使用

-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

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 页”将在第 2 页）。

First page (this will be on page n.1)
<div style="break-after:page"></div>
Second page (This will be on page n.2)

Answer 4

只是想更新一下。

page-break-after

现在是遗产。

官方页面状态

此属性已被 break-after 属性替换。

Answer 5

您可以使用 CSS 属性

page-break-before

（或

page-break-after

）。只需在那些应该在新行开始的块级元素（例如，标题、

page-break-before: always

、

div

或

p

元素）上设置

table

。

例如，要在任何二级标题之前和类中的任何元素之前换行

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

例如： 下面的代码出现在页面的末尾，你想强制 HTML 在另一个页面上打印，所以你可以这样编码

       <table>
            <tbody>
               <tr>
                  <td width="180" valign="top">
                            <p>
                                <strong> </strong>
                            </p>
                            <p>
                                <strong> </strong>
                            </p>
                            <p>
                                <strong> </strong>
                            </p>
                            <p>
                                <strong> </strong>
                            </p>
                            <p align="center">
                                <strong>Approved by Director</strong>
                            </p>
                        </td>
                    </tr>
                </tbody>
            </table>

这里的主要代码：所需的答案

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

现在像这样编写第二页/另一页的剩余代码

                <table border="1">
                            <tr class="center">
                                <td>
                                    #Main<b>&nbsp;Main</b>
                                </td>
                                <td>
                                    #Project<b>&nbsp;Project</b>
                                </td>
                                <td>
                                    #TypeMainProj<b>&nbsp;Main + Project</b>
                                </td>
                                <td>
                                    #Imprest<b>&nbsp;Imprest</b>
                                </td>
                            </tr>
                        </table>

Answer 8

下面的代码对我有用，还有更多的例子这里

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

Answer 9

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

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

分页后不能在链接的 CSS 文件中，它必须在 HTML 本身中。

Answer 10

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

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

  .

Answer 11

CSS

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

HTML

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

Answer 12

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

我加了

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

在每第三行和我的父 div 之后

display: flex;

所以我删除了

display: flex;

并且它按我想要的方式工作。

Answer 13

• 我们可以在要引入分页符的地方添加样式为“page-break-after: always”的page break标签 网页。
  
• “分页前”也有效

例子：

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 14

@Chris Doggett 非常有道理。 虽然，我在 lvsys.com 上发现了一个有趣的技巧，它实际上适用于 firefox 和 chrome。只需将此注释放在您希望插入分页符的任何位置。您还可以用任何块元素替换

<p>

标签。

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