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

Can I force a page break in HTML printing?

提问by Daniel Magliola

I'm making a HTML report that is going to be printable, and it has "sections" that should start in a new page.

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

Is there any way to put something in the HTML/CSS that will signal to the browser that it needs to force a page break (start a new page) at that point?

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

I don't need this to work in every browser out there, I think I can tell people to use a specific set of browsers in order to print this.

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

回答by Chris Doggett

Add a CSS class called "pagebreak" (or "pb"), like so:

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

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

Then add an empty DIV tag (or any block element that generates a box) where you want the page break.

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

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

It won't show up on the page, but will break up the page when printing.

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

P.S. Perhaps this only applies when using -after(and also what else you might be doing with other <div>s on the page), but I found that I had to augment the CSS class as follows:

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

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

回答by jfarrell

Try this link

试试这个链接

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

回答by shazyriver

Just wanted to put an update. page-break-afteris a legacy property now.

只是想发布一个更新。page-break-after现在是遗产财产。

Official pagestates

官方页面说明

This property has been replaced by the break-afterproperty.

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

回答by Jukka K. Korpela

You can use the CSS property page-break-before(or page-break-after). Just set page-break-before: alwayson those block-level elements (e.g., heading, div, p, or tableelements) that should start on a new line.

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

For example, to cause a line break before any 2nd level heading and before any element in class newpage(e.g., <div class=newpage>...), you would use

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

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

回答by Giovanni G. PY

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>

Just add this where you need the page to go to the next one (the text "page 1" will be on page 1 and the text "page 2" will be on the second page).

只需将它添加到您需要页面转到下一页的位置（文本“第 1 页”将在第 1 页上，文本“第 2 页”将在第二页上）。

Page 1
<div style='page-break-after:always'></div>
Page 2

This works too:

这也有效：

First page (there is a break after this)
<div style="break-after:page"></div>
Second page (This will be printed in the second page)

回答by Basj

Let's say you have a blog with articles like this:

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

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

Just adding this to the CSS worked for me:

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

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

(tested and working on Chrome 69 and Firefox 62).

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

Reference:

参考：

• https://www.w3schools.com/cssref/pr_print_pageba.asp

• https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after; important note: here it's said This property has been replaced by the break-after property.but it didn't work for me with break-after. Also the MDN doc about break-afterdoesn't seem to be specific for page-breaks, so I prefer keeping the (working) page-break-after: always;.

• 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。此外，关于 MDN 的文档break-after似乎并不是专门针对分页符的，所以我更喜欢保留 (working) page-break-after: always;.

回答by Chinmay

• We can add a page breaktag with style "page-break-after: always" at the point where we want to introduce the pagebreak in the html page.
  
• "page-break-before" also works

• 我们可以添加分页标签风格“ ：始终分页符，之后在这里我们要介绍的HTML页面的分页符点”。
  
• “ page-break-before”也有效

Example:

例子：

HTML_BLOCK_1
<p style="page-break-after: always"></p>
HTML_BLOCK_2
<p style="page-break-after: always"></p>
HTML_BLOCK_3

While printing the html file with the above code, the print preview will show three pages (one for each html block "HTML_BLOCK_n" ) where as in the browser all the three blocks appear sequentially one after the other.

在使用上述代码打印 html 文件时，打印预览将显示三页（每个 html 块“ HTML_BLOCK_n”一个），在浏览器中，所有三个块依次出现。

回答by Dinesh Sharma

I needed a page break after every 3rd row while we use print command on browser.

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

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

我添加了 <div style='page-break-before: always;'></div>

after every 3rd row and my parent div have display: flex; so I removed display: flex; and it was working as I want.

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

回答by Vlad Hnatovskyi

CSS

CSS

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

HTML

HTML

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

回答by Oniya Daniel

@Chris Doggettmakes perfect sense. Although, I found one funny trick on lvsys.com, and it actually works on firefox and chrome. Just put this comment anywhere you want the page-break to be inserted. You can also replace the <p>tag with any block element.

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

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