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

它不会显示在页面上,但会在打印时分解页面.

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

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 4

试试这个（它适用于 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 5

例如：下面的代码出现在页面末尾，并且您想要强制 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 6

您可以使用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 7

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

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

Answer 8

只是想进行更新。page-break-after现在是遗产。

官方页面状态

该属性已由break-after属性代替。