1. IronPDF
  2. 疑難排解
  3. 頁首/頁尾與分頁

PDF 中的頁首、頁尾與分頁管理

Curtis Chau
Curtis Chau
更新:
This article was translated from English: Does it need improvement?
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 輸入內容。

此外，您可請網頁設計師協助檢查 HTML 檔案，並同步追蹤修訂內容。

另一方面，披露區塊的定位會受到諸多因素影響，包括表格結構、tfoot 以及其他許多因素。 因此，仔細檢查您的 HTML 字串和結構肯定會有幫助。

3. 在 Chrome 的"列印預覽"中檢查輸出結果

IronPDF 會輸出與桌面版 Chrome 網頁瀏覽器完全相同的 PDF 檔案，這得益於 IronPDF 採用了 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
  立即與工程團隊聯繫
技術撰稿人

Curtis Chau 擁有卡爾頓大學（Carleton University）的電腦科學學士學位，專精於前端開發，並精通 Node.js、TypeScript、JavaScript 及 React。他熱衷於打造直觀且美觀的用戶介面，喜歡運用現代框架，並創建結構完善、視覺上吸引人的手冊。

除了開發工作之外，Curtis 對物聯網（IoT）抱有濃厚興趣，致力於探索整合硬體與軟體的創新方法。閒暇時，他喜歡玩遊戲和開發 Discord 機器人，將對科技的熱愛與創意相結合。

準備開始了嗎？
Nuget 下載 19,014,616 | 版本： 2026.5 just released
Still Scrolling Icon

還在往下捲動嗎？

想要快速確認成果嗎？ PM > Install-Package IronPdf
執行範例 觀看您的 HTML 轉為 PDF。