页眉/页脚和分页符
分页符可能会引起混淆。
如果应用正确，"page-break-after "CSS 规则将始终有效。但是，如果您的样式表将div从display:block改为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。这一点 工具 可以用来提供帮助。
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 渲染器，并使用 RenderHtmlAsPdf()或RenderHtmlFileAsPdf()方法创建 PDF 文档。
您可能需要向渲染器指定一些渲染选项，以便对输出 PDF 和渲染操作进行微调。请参见 条 了解更多信息。
