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 規則應用於區塊級元素，最好是 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>
<!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 驗證器可用於檢查所使用的 CSS 樣式。

HTML驗證器可以幫助您驗證HTML輸入。

此外，您還可以請網頁設計師檢查您的 HTML 程式碼，並追蹤變更。

另一方面，揭露部分的定位受到許多因素的影響，包括表格結構、tfoot 等等。 所以仔細檢查你的 HTML 字串和結構肯定會有幫助。

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

由於IronPDF使用了 Chrome PDF 渲染引擎，因此IronPDF輸出的 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 渲染器，並使用 RenderHtmlAsPdf() 或 RenderHtmlFileAsPdf() 方法建立 PDF 文件。

您可能需要向渲染器指定一些渲染選項，以便微調輸出 PDF 以及渲染操作。 請閱讀這篇文章以了解更多資訊。

Curtis Chau
Curtis Chau
  立即與工程團隊聊天
技術作家

Curtis Chau 擁有卡爾頓大學計算機科學學士學位，專注於前端開發，擅長於 Node.js、TypeScript、JavaScript 和 React。Curtis 熱衷於創建直觀且美觀的用戶界面，喜歡使用現代框架並打造結構良好、視覺吸引人的手冊。

除了開發之外，Curtis 對物聯網 (IoT) 有著濃厚的興趣，探索將硬體和軟體結合的創新方式。在閒暇時間，他喜愛遊戲並構建 Discord 機器人，結合科技與創意的樂趣。

準備好開始了嗎？
Nuget 下載 18,560,885 | 版本： 2026.4 剛剛發布
Still Scrolling Icon

還在捲動嗎？

想要快速證明？ PM > Install-Package IronPdf
執行範例 觀看您的 HTML 變成 PDF。