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 验证器可用于检查使用的CSS样式。

HTML 验证器可帮助你验证你的HTML输入。

此外，您可以让您的网页设计师在检查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渲染器，使用RenderHtmlAsPdf()或RenderHtmlFileAsPdf()方法创建您的PDF文档。

您可能需要向渲染器指定一些渲染选项，以微调输出PDF及渲染操作。 请参阅这篇文章了解更多。

Curtis Chau
Curtis Chau
  立即与工程团队聊天
技术作家

Curtis Chau 拥有卡尔顿大学的计算机科学学士学位，专注于前端开发，精通 Node.js、TypeScript、JavaScript 和 React。他热衷于打造直观且美观的用户界面，喜欢使用现代框架并创建结构良好、视觉吸引力强的手册。

除了开发之外，Curtis 对物联网 (IoT) 有浓厚的兴趣，探索将硬件和软件集成的新方法。在空闲时间，他喜欢玩游戏和构建 Discord 机器人，将他对技术的热爱与创造力相结合。

准备开始了吗？
Nuget 下载 16,493,056 | Version: 2025.11 刚刚发布