HTML で印刷中の改ページ

1. page-break-after プロパティを always に設定します @media print 内で HTML の改ページにする
2. page-break-before プロパティを always に設定します @media print 内で HTML の改ページにする
3. break-after プロパティを page に設定して、HTML で改ページする

この記事では、HTML コンテンツの印刷中に改ページを強制するいくつかの方法について説明します。

page-break-after プロパティを always に設定します @media print 内で HTML の改ページにする

CSS の @media print ルールを使用すると、HTML コンテンツの印刷中にルールを適用できます。 このルールでスタイルを変更できます。

JavaScript を使用して、指定された HTML コンテンツを出力する onclick() イベントを作成できます。 window.print() メソッドは、現在のウィンドウを印刷します。

onclick() イベントを使用して、このメソッドを呼び出すことができます。

CSS では、@media print を使用して、HTML 要素の page-break-after プロパティを always に設定して、その時点から改ページすることができます。

たとえば、h1 タグを使用して 2つの見出しを作成します。 最初の見出しに改ページ前、もう 1つの見出しに改ページ後という名前を付けます。

最初の見出しに break-page というクラス名を付けます。 次に、ボタン Print を作成し、ボタンの onclick リスナーを追加し、window.print() メソッドを呼び出します。

CSS セクションの @media print ルール内で break-page クラスを選択します。 次に、その page-break-after プロパティを always に設定します。

以下の例は、印刷ボタンをクリックした後、見出し改ページ前が最初のページに表示され、2 番目の見出しとボタンが印刷中に 2 ページ目に表示されることを示しています。 page-break-after プロパティを使用して、HTML の印刷中に改ページできます。

コード例:

<h1 class="break-page">Before page break </h1>
<h1>After page break</h1>
<button onclick="window.print()">Print</button>

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

デモ

page-break-before プロパティを always に設定します @media print 内で HTML の改ページにする

この方法は、前の方法と非常によく似ています。 違いは、page-break-before プロパティを使用していることです。

@media print ルールでも同様に使用されます。 このメソッドは、page-break-before プロパティを使用した HTML コンテンツの前に改ページを作成します。

たとえば、最初の方法と同様に 2つの見出しを作成します。 今回は、2 番目の見出しにクラス名 break-page を付けます。

次に、window.print() メソッドを呼び出す onclick リスナーを持つボタンを作成します。 CSS セクションの @media print 内で、break-page クラスを選択し、page-break-before プロパティを always に設定します。

改ページは、印刷ボタンをクリックすると、2 番目の見出し改ページの後の前に表示されます。

コード例:

<h1>Before page break </h1>
<h1 class="break-page">After page break</h1>
<button onclick="window.print()">Print</button>

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

break-after プロパティを page に設定して、HTML で改ページする

要素の break-after プロパティを page に設定して、HTML でページを分割できます。 プロパティが使用されている要素の後で改ページします。

次に、上記のメソッドのように window.print() を使用して HTML ページを印刷できます。 この方法は、@media print ルールを使用しないため、上記の方法とは異なります。

たとえば、通常どおり 2つの見出しを作成します。 見出しの間に、空の div を作成し、break-page というクラス名を付けます。

次に、window.print() メソッドを呼び出す onclick リスナーでクリック可能なボタンを作成します。

break-page クラスを選択し、その break-after プロパティを CSS で page に設定します。

印刷中に最初の見出しの後で改ページします。 このように、break-after プロパティを使用して、HTML でページを分割できます。

コード例:

<h1>
Before page break
</h1>
<div class="break-page"></div>
<h1>
After page break
</h1>
<button onclick="window.print();" />Print</button>

.break-page {
    break-after: page;
}