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

チャクニット・ビン

2023年1月25日

更新済み 2025年2月5日

共有:

Translated

View the article in English

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

IronPDFを始めましょう

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

最初のステップ:

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

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

改ページを追加

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

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

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

この例では、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")

$vbLabelText $csharpLabel

上記のコードは以下の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>

HTML

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

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

page-break-inside: avoid これは、スタイルをブロックレベルのHTMLノードに適用することを確実にするために、テーブルそのものよりもラッピングDIVに適用する方が良いです。

大規模なHTMLテーブルが複数のPDFページにまたがる場合、各ページにわたってテーブルのヘッダーおよびフッターを複製するには、テーブル内で<thead>グループを使用することができます。

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

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

HTML

高度な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>

HTML

チャクニット・ビン

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

ソフトウェアエンジニア

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