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