PDF 中的頁首、頁尾與分頁管理
分頁符號可能會造成混淆。
只要正確應用，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>若您需要讓表格的頁首和頁尾在每個 PDF 頁面中重複出現，請參閱這篇文章：在 HTML PDF 中新增或避免分頁
若上述步驟未能解決您的問題，請嘗試以下方法：
1. 簡化問題
若您的內容長度不一，請測試不同長度的內容，以確保您使用的是正確的 HTML/CSS。 此工具可供參考使用。
2. 驗證您的 HTML 和 CSS
可使用 CSS Validator 檢查所使用的 CSS 樣式。
您可以使用 HTML Validator 來協助驗證您的 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 檔案以及渲染操作。 請參閱這篇文章以了解更多資訊。
Curtis Chau擁有Carleton大學的電腦科學學士學位，專精於前端開發，擁有Node.js、TypeScript、JavaScript和React的專業知識。Curtis熱衷於建立直觀且美觀的使用者介面，喜愛使用現代框架並建立結構良好、視覺吸引力的手冊。
