HTML印刷で改ページを強制できますか？

印刷可能なHTMLレポートを作成しています。これには、新しいページから始まる「セクション」があります。

その時点で改ページを強制する（新しいページを開始する）必要があることをブラウザーに通知する何かをHTML / CSSに入れる方法はありますか？

これをすべてのブラウザーで機能させる必要はありません。これを印刷するために特定のブラウザーのセットを使用するように人々に伝えることができると思います。

次のように、 "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;
    }
}

このリンクを試してください

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

アップデートを入れたかっただけです。page-break-after現在は古いプロパティです。

公式ページの状態

このプロパティは、break-afterプロパティに置き換えられました。

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 }

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ページ目にあります）。

Page 1
<div style='page-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)

次のような記事のブログがあるとします。

<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でした。また、MDNに関するドキュメントは改break-afterページに固有のものではないようです。そのため、（機能する）を維持することをお勧めしpage-break-after: always;ます。

• 私たちは、追加することができます改ページのスタイル「でタグ：常に改ページ-後に我々はhtmlページに改ページを紹介したいポイントで」。
  
• 「改ページ」も機能します

例：

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

上記のコードでhtmlファイルを印刷している間、印刷プレビューには3つのページ（各htmlブロック " HTML_BLOCK_n "に1つ）が表示されます。

ブラウザで印刷コマンドを使用している間、3行ごとに改ページが必要でした。

<div style = 'page-break-before：always;'> </ div>を追加しました

3行ごとと親divが表示された後：flex; だから私はディスプレイを削除しました：flex; 思い通りに動いていた。

CSS

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

HTML

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

@ クリス・ドッグゲットは完全に理にかなっています。しかし、私はlvsys.comで1つの面白いトリックを見つけました、そしてそれは実際にはFirefoxとChromeで動作します。改ページを挿入したい場所にこのコメントを置くだけです。<p>タグを任意のブロック要素に置き換えることもできます。

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