頁眉/頁腳和分頁符號
分頁符號可能會讓人困惑。
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。 工具 可以用來協助。
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 Rendering Engine 的信息： 什麼是IronPDF的Chrome Renderer？
4. 使用 Chrome 開發者工具
或者，您可以使用 Chrome 開發者工具中的 Inspect 檢查元素中計算出的最終 CSS。這將提供有關字串中每個 HTML 元素的更多詳細信息。
5. 使用 IronPDF 渲染 HTML
將已完成的 HTML 字串或 HTML 文件發送到 IronPDF Chrome 渲染器並使用 RenderHtmlAsPdf()或 RenderHtmlFileAsPdf()方法來創建您的 PDF 文件。
您可能需要為渲染器指定一些渲染選項，以便微調您的輸出 PDF 以及渲染操作。請參閱此 文章 了解更多。
