Managing Headers, Footers & Page Breaks in PDFs

更新日:9月 10, 2025

Translated

View the article in English

ページ区切りは混乱を招くことがあります。

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="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="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>

HTML

代わりにすべてのPDFページに繰り返しのテーブルヘッダーとフッターが必要な場合、この記事をご覧ください: HTML PDFでページ区切りを追加または回避

上記の手順で問題が解決しない場合は、以下をお試しください。

1. 問題を簡素化する

コンテンツが長さによって異なる場合、変数の長さのコンテンツをテストして、正しいHTML/CSSを使用していることを確認してください。このツールを使用して支援できます。

2. HTMLとCSSを検証する

CSS Validatorを使用して使用されているCSSスタイリングをチェックできます。

HTML Validatorを使用して、HTML入力を検証するのに役立ちます。

さらに、WebデザイナーにHTMLの検査を依頼し、変更を追跡しながら行うことができます。

一方、開示セクションの位置は、テーブル構造、tfootなど多くの要因に影響されます。したがって、HTML文字列と構造を二重にチェックすることが確実に役立ちます。

3. Chromeの印刷プレビューで出力を確認する

IronPDFはIronPDFで使用されるChrome PDFレンダリングエンジンのおかげで、デスクトップChromeウェブブラウザに似たPDFを出力します。

したがって、Chrome印刷プレビューを通じてHTMLの外観を確認し、HTMLに応じて調整することができます。これは試行錯誤を必要とするかもしれませんが、HTMLをデバッグする最も簡単な方法です。

Chrome印刷プレビューを介してHTMLをデバッグする方法の詳細を学ぶ: ピクセルパーフェクトHTMLフォーマット

Chrome PDFレンダリングエンジンに関する詳細はこの記事をご覧ください: IronPDFのChromeレンダラーとは？

4. Chrome開発者ツールを使用する

または、Chrome開発者ツールの_Inspect_を使用して、要素の最終的なCSSを計算されたものとして確認することができます。これは、文字列に存在する各HTML要素に関する詳細を提供します。

5. IronPDFを使ってHTMLをレンダリングする

最終化されたHTML文字列またはHTMLファイルをIronPDF Chrome Rendererに送信し、RenderHtmlAsPdf()またはRenderHtmlFileAsPdf()メソッドを使用してPDFドキュメントを作成します。

出力PDFおよびレンダリング操作を微調整するためにレンダリングオプションを指定する必要があるかもしれません。詳細についてはこの記事をご覧ください。

Curtis Chau

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

テクニカルライター

Curtis Chauは、カールトン大学でコンピュータサイエンスの学士号を取得し、Node.js、TypeScript、JavaScript、およびReactに精通したフロントエンド開発を専門としています。直感的で美しいユーザーインターフェースを作成することに情熱を持ち、Curtisは現代のフレームワークを用いた開発や、構造の良い視覚的に魅力的なマニュアルの作成を楽しんでいます。

開発以外にも、CurtisはIoT（Internet of Things）への強い関心を持ち、ハードウェアとソフトウェアの統合方法を模索しています。余暇には、ゲームをしたりDiscordボットを作成したりして、技術に対する愛情と創造性を組み合わせています。

準備はいいですか?

Nuget ダウンロード 16,154,058 | バージョン: 2025.11 ただ今リリースされました