PDFのヘッダー、フッター、改ページの管理
ページ区切りは混乱を招くことがあります。
page-break-after CSSルールは、正しく適用されれば常に機能します。 しかし、このルールは、スタイルシートがdivをdisplay:blockから変更した場合には機能しません。 page-break-after ルールがブロックレベルの要素に適用されていることを確認してください。できれば、bodyタグの直接の子である div に適用することが望ましいです。
以下のHTMLの例では
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Print Page Breaks with Header and Footer</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header, footer {
position: fixed;
width: 100%;
text-align: center;
background-color: #f1f1f1;
padding: 10px 0;
}
header {
top: 0;
}
footer {
bottom: 0;
}
.content {
margin: 150px 20px; /* Adjust margins to prevent content overlap with header and footer */
}
.page-break {
page-break-after: always;
display: block; /* Ensure it remains a block-level element */
}
</style>
</head>
<body>
<header>
<h1>Document Title</h1>
<p>Header Content</p>
</header>
<footer>
<p>Footer Content</p>
</footer>
<div class="content">
<div class="page-break">
<h2>Section 1</h2>
<p>This is the first section. After this section, there will be a page break.</p>
</div>
<div class="content">
<div class="page-break">
<h2>Section 2</h2>
<p>This is the second section. The header and footer continue to be displayed, and the content starts on a new page.</p>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Print Page Breaks with Header and Footer</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header, footer {
position: fixed;
width: 100%;
text-align: center;
background-color: #f1f1f1;
padding: 10px 0;
}
header {
top: 0;
}
footer {
bottom: 0;
}
.content {
margin: 150px 20px; /* Adjust margins to prevent content overlap with header and footer */
}
.page-break {
page-break-after: always;
display: block; /* Ensure it remains a block-level element */
}
</style>
</head>
<body>
<header>
<h1>Document Title</h1>
<p>Header Content</p>
</header>
<footer>
<p>Footer Content</p>
</footer>
<div class="content">
<div class="page-break">
<h2>Section 1</h2>
<p>This is the first section. After this section, there will be a page break.</p>
</div>
<div class="content">
<div class="page-break">
<h2>Section 2</h2>
<p>This is the second section. The header and footer continue to be displayed, and the content starts on a new page.</p>
</div>
</div>
</body>
</html>PDFファイルの各ページにテーブルのヘッダーとフッターを繰り返し表示する必要がある場合は、この記事をご覧ください：HTML PDFでのページ区切りの追加または回避
上記の手順で問題が解決しない場合は、以下をお試しください：
1. 問題を簡素化する
コンテンツの長さが異なる場合は、正しいHtml/CSSを使用していることを確認するために、長さの異なるコンテンツをテストしてください。 このツールを使用して支援することができます。
HTMLとCSSを検証する
CSS Validator を使用して、使用されているCSSスタイリングをチェックできます。
HTML Validator は、HTML入力の検証をサポートするために使用できます。
さらに、変更を追跡しながらHTMLをチェックする際に、ウェブデザイナーに依頼することもできます。
一方、開示部分の位置は、テーブル構造やtfootなど多くの要因に影響される。 そのため、HTMLの文字列と構造をダブルチェックすることは必ず役に立つ。
Chromeの印刷プレビューで出力を確認してください。
IronPDF で使用されているChrome PDFレンダリングエンジンのおかげで、IronPDFはデスクトップのChromeウェブブラウザに同じPDFを出力します。
そのため、Chrome（クローム）の印刷プレビューでHTMLの外観を確認し、それに応じてHTMLを調整することができます。 試行錯誤が必要かもしれないが、HTMLをデバッグするには最も簡単な方法だ。
Chrome 印刷プレビューを介してHTMLをデバッグする方法の詳細を学ぶ: Pixel Perfect HTML Formatting
Chrome PDFレンダリングエンジンの詳細については、この記事をご覧ください: What is IronPDF's Chrome Renderer?
4. Chromeのデベロッパーツールを使用する
また、Chrome（クローム）のデベロッパーツールの_Inspect_を使用して、要素内の計算された最終的なCSSを検索することもできます。 これにより、文字列内に存在する各HTML要素の詳細が示される。
5. IronPDFを使用してHTMLをレンダリングする
最終的なHTML文字列またはHTMLファイルをIronPDF Chrome Rendererに送信し、RenderHtmlAsPdf()またはRenderHtmlFileAsPdf()メソッドを使用してPDFドキュメントを作成します。
出力PDFやレンダリング操作を微調整するために、レンダラーにいくつかのレンダリングオプションを指定する必要があるかもしれません。 詳しくは、この記事をご覧ください。
