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将由于使用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 下载 18,560,885 | 版本: 2026.4 刚刚发布
Still Scrolling Icon

还在滚动吗？

想快速获得证据？ PM > Install-Package IronPdf
运行示例看着你的HTML代码变成PDF文件。