页眉/页脚和分页符
分页符可能会让人困惑。
如果正确应用，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="content">
<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="content">
<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>如果您需要在每个 PDF 页面中重复表头和表脚，请查看本文：在 HTML PDF 中添加或避免分页符
如果上述步骤未能解决您的问题，请尝试以下操作：
1. 简化问题
如果你的内容长度不一，请测试不同长度的内容，以确保你使用了正确的Html/CSS。 This工具可以用来提供帮助。
2. 验证您的 HTML 和 CSS
CSS 验证器可以用来检查所使用的CSS样式。
HTML 校验器可用于帮助您验证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以及渲染操作进行微调。 See this条了解更多信息。
