C#でHTML PDFの改ページを追加または回避する
C#のIronPDFを使用してHTMLをPDFに変換する際に、page-break-after: always;をHTML要素に追加したり、page-break-inside: avoid;で改ページを防止することで、PDF文書内の改ページを制御します。
IronPDFはPDFドキュメント内での改ページをサポートします。 PDFドキュメントとHTMLの主な違いは、HTMLドキュメントはスクロールする傾向があるのに対し、PDFは複数ページで印刷可能である点です。 HTML文字列をPDFに変換するとき、開発者は、プロフェッショナルなドキュメントを保証するために、ページが改行される場所を正確に制御する必要があります。
クイックスタート: HTMLからPDFへの変換での改ページの実装
IronPDFを使ってHTMLを改ページ付きのPDFに変換します。 この例では、特定のHTMLコンテンツの後に改ページを挿入することで、適切なページ分割を実現しています。 page-break-after:always;スタイルを追加することによって、開発者は改ページが発生する場所を制御し、結果のPDF文書の可読性と構成を向上させます。
今すぐ NuGet で PDF を作成してみましょう:
NuGet パッケージ マネージャーを使用して IronPDF をインストールします
このコード スニペットをコピーして実行します。
new IronPdf.ChromePdfRenderer() .RenderHtmlAsPdf("<html><body><h1>Hello World!</h1><div style='page-break-after: always;'></div></body></html>") .SaveAs("pageWithBreaks.pdf");実際の環境でテストするためにデプロイする
最小限のワークフロー（5ステップ）
- PDFで改ページを使用するC#ライブラリをダウンロードする。
- HTML文字列に改ページを適用してPDFに変換する
- 画像の改ページを避けるために、page-break-inside属性にavoidを設定してください。
- テーブルの改ページを避けるため、テーブルも同じようにしてください。
- CSSレベルでスタイルを設定する
HTMLからPDFに改ページを追加するにはどうすればよいですか?
HTMLで改ページを作成するには、HTMLコードでこれを使用してください：
<div style="page-break-after: always;"></div><div style="page-break-after: always;"></div>page-break-afterCSSプロパティは、HTMLをPDFにレンダリングするときにページネーションを制御するための最も信頼できる方法です。 このプロパティは、このスタイルを含む要素の直後に改ページを挿入するようPDFレンダラーに指示します。 カスタムマージンや特定のページレイアウトで作業する場合、改ページにより、コンテンツが意図した場所に正確に表示されるようにします。
なぜpage-break-afterは他の方法よりも効果的なのですか?
この例では、私のHTMLに次の表と画像があり、表の後に改ページを追加して、2つの別々のページにしたい。 page-break-afterプロパティは、page-break-beforeや手動スペーシングのような代替手段と比較して、異なるレンダリングエンジン間でより一貫した結果を提供します。 複雑なレイアウトの新しいPDFを作成する場合、このアプローチによって予測可能なページネーションが保証されます。
改ページにはどの要素を使うべきですか?
改ページは、<div>、<section>、<article>のようなブロックレベルの要素で効果的に機能します。 さまざまなHTML要素に改ページスタイルを適用できますが、コンテンツを専用の<div>で囲むことが、最も信頼できる結果をもたらします。 これは、ヘッダーとフッターがページ間で一貫して表示される必要がある場合に特に重要です。
テーブル
<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><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>画像
<img src="/static-assets/pdf/how-to/html-to-pdf-page-breaks/ironpdf-logo-text-dotnet.svg" style="border:5px solid #000000; padding:3px; margin:5px" /><img src="/static-assets/pdf/how-to/html-to-pdf-page-breaks/ironpdf-logo-text-dotnet.svg" style="border:5px solid #000000; padding:3px; margin:5px" />C#コードで改ページを実装するにはどうすればよいですか?
:path=/static-assets/pdf/content-code-examples/how-to/html-to-pdf-page-breaks-page-break.csusing 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");上のコードは2ページのPDFを生成します：1ページ目に表、2ページ目に画像：
画像の改ページを防ぐにはどうすればよいですか?
画像や表の中で改ページを避けるには、page-break-inside属性をDIV要素に適用してください。 このテクニックは、ChromeでHTMLをデバッグするときに視覚的な整合性を維持し、PDFが意図したとおりにレンダリングされるようにするために不可欠です。
<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>なぜ画像をDIV要素で囲む必要があるのですか
画像をDIV要素でラップすることで、改ページの動作をよりよく制御できます。 page-break-inside:avoidプロパティは、ブロックレベルの要素で最も確実に機能します。 画像はデフォルトではインライン要素なので、ラップすることでスタイルが適切に適用されるようにします。 このアプローチは、PDFフォーマットで構造を維持する必要があるレスポンシブCSSレイアウトを扱う場合に特に役立ちます。
画像の改ページでよくある問題とは
よくある問題としては、画像がページ間で分割される、ページの境界で部分的にレンダリングされる、キャプションや関連テキストが失われるなどがあります。 このような問題は、画像がページの下部付近にある場合によく発生します。 page-break-inside:avoidラッパーを使うことで、画像全体とそのコンテナが1つのユニットとして次のページに移動するようにし、これらの問題を防ぎます。
using IronPdf;
// Example showing how to prevent image breaks in a more complex layout
const string htmlWithProtectedImage = @"
<html>
<head>
<style>
.no-break { page-break-inside: avoid; }
.image-container {
border: 2px solid #333;
padding: 10px;
margin: 20px 0;
}
</style>
</head>
<body>
<h1>Product Gallery</h1>
<p>Our featured products are displayed below:</p>
<div class='no-break image-container'>
<img src='product1.jpg' alt='Product 1' />
<p>Product 1 Description</p>
</div>
<div class='no-break image-container'>
<img src='product2.jpg' alt='Product 2' />
<p>Product 2 Description</p>
</div>
</body>
</html>";
var renderer = new ChromePdfRenderer();
var pdf = renderer.RenderHtmlAsPdf(htmlWithProtectedImage);
pdf.SaveAs("ProductGallery.pdf");using IronPdf;
// Example showing how to prevent image breaks in a more complex layout
const string htmlWithProtectedImage = @"
<html>
<head>
<style>
.no-break { page-break-inside: avoid; }
.image-container {
border: 2px solid #333;
padding: 10px;
margin: 20px 0;
}
</style>
</head>
<body>
<h1>Product Gallery</h1>
<p>Our featured products are displayed below:</p>
<div class='no-break image-container'>
<img src='product1.jpg' alt='Product 1' />
<p>Product 1 Description</p>
</div>
<div class='no-break image-container'>
<img src='product2.jpg' alt='Product 2' />
<p>Product 2 Description</p>
</div>
</body>
</html>";
var renderer = new ChromePdfRenderer();
var pdf = renderer.RenderHtmlAsPdf(htmlWithProtectedImage);
pdf.SaveAs("ProductGallery.pdf");テーブルの改ページを避けるにはどうすればよいですか?
上に示したように、テーブル内の改ページは、CSSのpage-break-inside: avoidを使って避けることができます。 これはスタイルをブロックレベルのHTMLノードに適用するため、テーブル本体よりもラッピングDIVに適用した方がよいです。 包括的なHTML to PDFチュートリアルを作成する場合、適切な表組みは読みやすさのために非常に重要です。
テーブルヘッダーにはいつtheadを使うべきですか?
複数のPDFページにまたがる大きなHTML表の全ページにわたって表のヘッダとフッタを複製するには、表の中で<thead>グループを使います：
<thead>
<tr>
<th>C Sharp</th><th>VB</th>
</tr>
</thead><thead>
<tr>
<th>C Sharp</th><th>VB</th>
</tr>
</thead><thead>要素は、テーブルが複数のページにまたがる場合、各ページでテーブルのヘッダーが繰り返されるようにします。 これは、財務報告書、データリスト、各ページに文脈が必要な文書に特に役立ちます。 初期設定とインストール概要のために、IronPdfはこれらのHTML標準を自動的に処理します。
なぜ DIV でテーブルをラップすることが重要なのですか?
テーブルを改ページコントロールのあるDIV要素でラップすると、いくつかの利点があります：
- 必要に応じて、表全体が1つのユニットとして次のページに移動するようにします。
- ヘッダーとデータ行の分離を防ぐ
- スタイリングとスペーシングのコントロールを追加できます。
- キャプションや説明文の追加を容易にします。
どのような高度な 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>どの CSS プロパティが複雑なレイアウトに最適ですか?
複雑なレイアウトの場合は、複数のCSSプロパティを組み合わせてください：
page-break-inside: avoid- 要素の分割を防ぎます。page-break-after: always- 要素の後で強制的に改行します。page-break-before: always- 要素の前で強制的に改行します。orphansとwidows- 改ページの最小行数を制御します。break-inside、break-after、break-before- モダンな CSS3 の選択肢
これらの特性は、適切なフローと読みやすさを備えたプロフェッショナルなPDFを作成するために連動します。
改ページの問題をトラブルシューティングするにはどうすればよいですか?
改ページが期待どおりに機能しない場合： 1.HTML構造が有効であることを確認する 2.ブロックレベルの要素にスタイルが適用されていることを確認する 3.まず簡単な例でテストし、次に複雑さを加えてください。 4.ブラウザ開発者ツールを使用して、計算されたスタイルを検査する 5.IronPdfのレンダリングオプションを使用することを検討してください。
PDFレンダラーによって改ページの扱いが若干異なる場合があるため、すべてのシナリオで一貫した結果を得るには、特定のユースケースでテストすることが重要であることを忘れないでください。
よくある質問
C# で HTML を PDF へ変換す る 際、 改ページ を追加す る には ど う し ますか。
IronPdfを使用して改ページを追加するには、改ページしたいHTMLコードに `
` を挿入してください。IronPDFのChromePdfRendererはこのCSSプロパティを認識し、PDFドキュメントのその位置に新しいページを作成します。PDF変換で改ページを制御するために最も信頼できるCSSプロパティは何ですか？
CSSプロパティ `page-break-after: always;` はIronPdfを使用する際に最も信頼できる方法です。このプロパティは異なるレンダリングエンジン間で一貫した結果を提供し、変換されたPDFドキュメントで予測可能なページ分割を保証します。
表や画像内の改ページを防ぐにはどうすればよいですか？
表や画像内の不要な改ページを防ぐには、`page-break-inside: avoid;` CSSプロパティを使用してください。IronPdfでHTMLをPDFに変換する場合、このスタイルによって表や画像が複数のページに分割されることなく、1つのページにそのまま残るようになります。
改ページスタイルに最適なHTML要素は？
改ページは`
インラインスタイルではなく、CSSレベルで改ページを制御できますか？
はい、インラインスタイルではなくCSSレベルで改ページスタイルを設定することができます。IronPdfのレンダリングエンジンはCSSスタイルシートに完全に対応しており、CSSファイルで改ページルールを定義することができます。
なぜpage-break-beforeではなくpage-break-afterを使用する必要があるのですか？
page-break-after` プロパティは `page-break-before` と比較して、異なるレンダリングエンジン間でより一貫した結果を提供します。IronPdfを使用して複雑なレイアウトのPDFを作成する場合、page-break-afterはより予測可能で信頼できるページネーションの動作を保証します。
無料で始めましょう
無料で始めましょう
無料ライブデモを予約
クレジットカードやアカウントの作成は不要です。
