1. IronPDF
2. ハウツー
3. 改ページ

HTML PDF にページ区切りを追加または回避

チャクニット・ビン

2023年1月25日

更新済み 2025年2月5日

共有:

IronPDFはPDFドキュメント内での改ページをサポートします。 PDFドキュメントとHTMLの大きな違いの一つは、HTMLドキュメントはスクロールする傾向があるのに対し、PDFは複数ページにわたっており、印刷することができる点です。

IronPDFを始めましょう

今日から無料トライアルでIronPDFをあなたのプロジェクトで使い始めましょう。

最初のステップ:

無料で始める

HTML PDFでの改ページの使用方法

1. PDFで改ページを使用するためのC#ライブラリをダウンロード
2. HTML文字列に改ページを適用し、PDFに変換する
3. 設定避ける画像でページ分割を避けるための `on page-break-inside` 属性
4. テーブル内での改ページを避けるために、同じことをテーブルに対して行います。
5. CSSレベルでスタイルを設定

改ページを追加

HTMLで改ページを作成する場合は、HTMLコードに以下を使用できます:

もちろん、英語のテキストを教えていただけますでしょうか？

ページブレークを作成するデモンストレーション

この例では、HTMLに以下の表と画像があり、表の後に改ページを追加することで、それらを別々のページにしたいと思います。

テーブル

画像

:path=/static-assets/pdf/content-code-examples/how-to/html-to-pdf-page-breaks-page-break.cs

using IronPdf;

const string html = @"
  <table style='border: 1px solid #000000'>
    <tr>
      <th>Company</th>
      <th>Product</th>
    </tr>
    <tr>
      <td>Iron Software</td>
      <td>IronPDF</td>
    </tr>
    <tr>
      <td>Iron Software</td>
      <td>IronOCR</td>
    </tr>
  </table>

  <div style='page-break-after: always;'> </div>

  <img src='https://ironpdf.com/img/products/ironpdf-logo-text-dotnet.svg'>";

var renderer = new ChromePdfRenderer();

var pdf = renderer.RenderHtmlAsPdf(html);
pdf.SaveAs("Page_Break.pdf");

Imports IronPdf

Private Const html As String = "
  <table style='border: 1px solid #000000'>
    <tr>
      <th>Company</th>
      <th>Product</th>
    </tr>
    <tr>
      <td>Iron Software</td>
      <td>IronPDF</td>
    </tr>
    <tr>
      <td>Iron Software</td>
      <td>IronOCR</td>
    </tr>
  </table>

  <div style='page-break-after: always;'> </div>

  <img src='https://ironpdf.com/img/products/ironpdf-logo-text-dotnet.svg'>"

Private renderer = New ChromePdfRenderer()

Private pdf = renderer.RenderHtmlAsPdf(html)
pdf.SaveAs("Page_Break.pdf")

上記のコードは以下のPDFを生成し、2ページに分かれています。最初のページにはテーブルがあり、2ページ目には画像が配置されています。

画像のページ分割を回避する

画像やテーブル内でページ分割を避けるには、ラッピングDIV要素に適用されるCSSの page-break-inside 属性を使用することができます。

<div style='page-break-inside: avoid'>.
 <img src='no-break-me.png'>
</div>

<div style='page-break-inside: avoid'>.
 <img src='no-break-me.png'>
</div>

テーブル内のページ区切りを回避

上記のように、表内の改ページを避けるには、以下のCSSを使用します：

page-break-inside: avoid（ページ内の改行: 回避） これは、スタイルをブロックレベルのHTMLノードに適用するために、テーブル自体よりも囲むDIVに適用する方が適しています。

大規模なHTMLテーブルが複数のPDFページにわたる場合、各ページにテーブルのヘッダーとフッターを複製するには、次のコードを使用できます。テーブル内のグループ:

<thead>
    <tr>
        <th>C Sharp</th><th>VB</th>
    </tr>
</thead>

<thead>
    <tr>
        <th>C Sharp</th><th>VB</th>
    </tr>
</thead>

高度なCSS3設定

より高いコントロールを実現するために、theadグループに加えてCSS3を使用することをお勧めします。

<style type="text/css">
    table { page-break-inside:auto }
    tr    { page-break-inside:avoid; page-break-after:auto }
    thead { display:table-header-group }
    tfoot { display:table-footer-group }
</style>

<style type="text/css">
    table { page-break-inside:auto }
    tr    { page-break-inside:avoid; page-break-after:auto }
    thead { display:table-header-group }
    tfoot { display:table-footer-group }
</style>

チャクニット・ビン

  今すぐエンジニアリングチームとチャット

ソフトウェアエンジニア

ChaknithはIronXLとIronBarcodeで作業しています。彼はC#と.NETに深い専門知識を持ち、ソフトウェアの改善と顧客サポートを支援しています。ユーザーとの対話から得た彼の洞察は、より良い製品、文書、および全体的な体験に貢献しています。