使用 C# 在 HTML PDF 中新增或避免分頁
在使用 C# 透過 IronPDF 將 HTML 轉換為 PDF 時，可透過在 HTML 元素中加入 page-break-after: always; 來控制 PDF 文件的分頁位置，或使用 page-break-inside: avoid; 來防止分頁。
IronPDF 支援 PDF 文件內的分頁功能。 PDF 文件與 HTML 之間的一大差異在於，HTML 文件通常具有捲動功能，而 PDF 則是多頁面的，且可以列印。 在將 HTML 字串轉換為 PDF 時，開發人員通常需要精確控制分頁位置，以確保文件呈現專業外觀。
快速入門：在 HTML 轉 PDF/A 轉換中實作分頁
使用 IronPDF 將 HTML 轉換為帶有分頁的 PDF 檔案。 此範例示範如何在特定 HTML 內容後插入分頁符，以確保分頁效果正確。 透過加入 page-break-after: always; 樣式，開發人員可控制分頁位置，從而提升生成的 PDF 文件的可讀性與組織性。 <div> <section> <article> <div> page-break-inside DIV page-break-inside: avoid page-break-inside: avoid DIV <thead> page-break-inside: avoid page-break-after: always page-break-before: always orphans widows break-inside break-after break-before
-
using NuGet 套件管理員安裝 https://www.nuget.org/packages/IronPdf
PM > Install-Package IronPdf -
請複製並執行此程式碼片段。
new IronPdf.ChromePdfRenderer() .RenderHtmlAsPdf("<html><body><h1>Hello World!</h1><div style='page-break-after: always;'></div></body></html>") .SaveAs("pageWithBreaks.pdf"); -
部署至您的生產環境進行測試
立即透過免費試用，在您的專案中開始使用 IronPDF
簡化工作流程（5 個步驟）
- 下載 C# 函式庫以在 PDF 中使用分頁
- 對 HTML 字串套用分頁符號並轉換為 PDF
- 將 `avoid on
page-break-inside`屬性設為避免在圖片中插入分頁 - 請對表格進行相同處理，以避免表格中的分頁
- 在 CSS 層級設定樣式
如何在 HTML 轉 PDF 的過程中加入分頁？
要在 HTML 中插入分頁，請在 HTML 程式碼中使用以下代碼：
<div style="page-break-after: always;"></div><div style="page-break-after: always;"></div>在將 HTML 渲染為 PDF 時，page-break-after CSS 屬性是控制分頁最可靠的方法。 此屬性會指示 PDF 渲染器在包含此樣式的元素之後立即插入分頁符。 當使用自訂邊距或特定頁面版面配置時，分頁功能可確保內容精確顯示於預定位置。
為什麼 page-break-after 的效果比其他方法更好？
在此範例中，我的 HTML 中包含以下 table 和 img，我希望將它們分開顯示在兩個不同的頁面中，方法是在 table 之後加入分頁符。 相較於 page-break-before 或手動空格等替代方案，page-break-after 屬性能在不同渲染引擎間提供更一致的呈現效果。 在建立具有複雜版面的新 PDF 檔案時，此方法可確保分頁結果可預測。
我應該使用哪些元素來設定分頁？
分頁功能可有效配合 section 及 article 等區塊級元素使用。 雖然您可以將分頁樣式套用至各種 HTML 元素，但將內容包裹在專用的 div 標籤中，能提供最可靠的結果。 這在處理需在各頁面中保持一致的頁首與頁尾時尤為重要。
表格
<table style="border: 1px solid #000000">
<tr>
<th>Company</th>
<th>Product</th>
</tr>
<tr>
<td>Iron Software</td>
<td>IronPDF</td>
</tr>
<tr>
<td>Iron Software</td>
<td>IronOCR</td>
</tr>
</table><table style="border: 1px solid #000000">
<tr>
<th>Company</th>
<th>Product</th>
</tr>
<tr>
<td>Iron Software</td>
<td>IronPDF</td>
</tr>
<tr>
<td>Iron Software</td>
<td>IronOCR</td>
</tr>
</table>圖片
<img src="/static-assets/pdf/how-to/html-to-pdf-page-breaks/ironpdf-logo-text-dotnet.svg" style="border:5px solid #000000; padding:3px; margin:5px" /><img src="/static-assets/pdf/how-to/html-to-pdf-page-breaks/ironpdf-logo-text-dotnet.svg" style="border:5px solid #000000; padding:3px; margin:5px" />如何在 C# 程式碼中實作分頁？
:path=/static-assets/pdf/content-code-examples/how-to/html-to-pdf-page-breaks-page-break.csusing IronPdf;
const string html = @"
<table style='border: 1px solid #000000'>
<tr>
<th>Company</th>
<th>Product</th>
</tr>
<tr>
<td>Iron Software</td>
<td>IronPDF</td>
</tr>
<tr>
<td>Iron Software</td>
<td>IronOCR</td>
</tr>
</table>
<div style='page-break-after: always;'> </div>
<img src='https://ironpdf.com/img/products/ironpdf-logo-text-dotnet.svg'>";
var renderer = new ChromePdfRenderer();
var pdf = renderer.RenderHtmlAsPdf(html);
pdf.SaveAs("Page_Break.pdf");Imports IronPdf
Private Const html As String = "
<table style='border: 1px solid #000000'>
<tr>
<th>Company</th>
<th>Product</th>
</tr>
<tr>
<td>Iron Software</td>
<td>IronPDF</td>
</tr>
<tr>
<td>Iron Software</td>
<td>IronOCR</td>
</tr>
</table>
<div style='page-break-after: always;'> </div>
<img src='https://ironpdf.com/img/products/ironpdf-logo-text-dotnet.svg'>"
Private renderer = New ChromePdfRenderer()
Private pdf = renderer.RenderHtmlAsPdf(html)
pdf.SaveAs("Page_Break.pdf")上述程式碼會產生一份包含 2 頁的 PDF：第一頁為 table，第二頁為 img：
如何防止圖片中的分頁？
若要避免在圖片或 table 內發生換行，請在包覆的 div 元素上套用 CSS avoid 屬性。 此技術對於在使用 Chrome 除錯 HTML 時維持視覺完整性至關重要，可確保您的 PDF 檔案能完全依照預期呈現。
<div style="page-break-inside: avoid">
<img src="no-break-me.png" />
</div><div style="page-break-inside: avoid">
<img src="no-break-me.png" />
</div>為什麼要將圖片包裹在 DIV 元素中？
將圖片包裹在 div 標籤中，可更精確地控制分頁行為。 page-break-inside 屬性在區塊級元素上運作最為可靠。 圖片預設為內嵌元素，因此將其包裹起來可確保樣式正確套用。 此方法在處理需於 PDF 格式中維持結構的響應式 CSS 佈局時，尤為實用。
圖片分頁常見的問題有哪些？
常見問題包括圖片被分割在不同頁面、頁面邊界處渲染不完整，以及圖說或相關文字遺失。 當圖片位於頁面底部附近時，這些問題經常發生。 使用 page-break-inside: avoid 封裝標籤可避免這些問題，確保整個圖片及其容器作為一個整體移至下一頁。
using IronPdf;
// Example showing how to prevent image breaks in a more complex layout
const string htmlWithProtectedImage = @"
<html>
<head>
<style>
.no-break { page-break-inside: avoid; }
.image-container {
border: 2px solid #333;
padding: 10px;
margin: 20px 0;
}
</style>
</head>
<body>
<h1>Product Gallery</h1>
<p>Our featured products are displayed below:</p>
<div class='no-break image-container'>
<img src='product1.jpg' alt='Product 1' />
<p>Product 1 Description</p>
</div>
<div class='no-break image-container'>
<img src='product2.jpg' alt='Product 2' />
<p>Product 2 Description</p>
</div>
</body>
</html>";
var renderer = new ChromePdfRenderer();
var pdf = renderer.RenderHtmlAsPdf(htmlWithProtectedImage);
pdf.SaveAs("ProductGallery.pdf");using IronPdf;
// Example showing how to prevent image breaks in a more complex layout
const string htmlWithProtectedImage = @"
<html>
<head>
<style>
.no-break { page-break-inside: avoid; }
.image-container {
border: 2px solid #333;
padding: 10px;
margin: 20px 0;
}
</style>
</head>
<body>
<h1>Product Gallery</h1>
<p>Our featured products are displayed below:</p>
<div class='no-break image-container'>
<img src='product1.jpg' alt='Product 1' />
<p>Product 1 Description</p>
</div>
<div class='no-break image-container'>
<img src='product2.jpg' alt='Product 2' />
<p>Product 2 Description</p>
</div>
</body>
</html>";
var renderer = new ChromePdfRenderer();
var pdf = renderer.RenderHtmlAsPdf(htmlWithProtectedImage);
pdf.SaveAs("ProductGallery.pdf");Imports IronPdf
' Example showing how to prevent image breaks in a more complex layout
Const htmlWithProtectedImage As String = "
<html>
<head>
<style>
.no-break { page-break-inside: avoid; }
.image-container {
border: 2px solid #333;
padding: 10px;
margin: 20px 0;
}
</style>
</head>
<body>
<h1>Product Gallery</h1>
<p>Our featured products are displayed below:</p>
<div class='no-break image-container'>
<img src='product1.jpg' alt='Product 1' />
<p>Product 1 Description</p>
</div>
<div class='no-break image-container'>
<img src='product2.jpg' alt='Product 2' />
<p>Product 2 Description</p>
</div>
</body>
</html>"
Dim renderer As New ChromePdfRenderer()
Dim pdf = renderer.RenderHtmlAsPdf(htmlWithProtectedImage)
pdf.SaveAs("ProductGallery.pdf")如何避免表格中的分頁？
如上所述，可透過 CSS avoid 避免表格內的分頁。 將此格式套用至包裹的 div 標籤，比直接套用至表格本身更為合適，以確保樣式能正確套用至區塊級 HTML 節點。 在製作全面的 HTML 轉 PDF 教學指南時，正確的表格格式對可讀性至關重要。
何時應使用 thead 作為表格標題？
若要在橫跨多個 PDF 頁面的大型 HTML 表格中，於每頁複製表格的頁首與頁尾，請在表格內使用 thead 群組：
<thead>
<tr>
<th>C Sharp</th><th>VB</th>
</tr>
</thead><thead>
<tr>
<th>C Sharp</th><th>VB</th>
</tr>
</thead><thead> 元素可確保當表格跨頁時，表格標題在每一頁都會重複顯示。 這對於財務報告、資料清單，以及任何每頁都需要上下文的文件特別有用。 關於初始設定與安裝概述，IronPDF 會自動處理這些 HTML 標準。
為何將表格包裹在 DIV 標籤中如此重要？
將表格包裹在帶有換頁控制項的 div 元素中，具有以下幾項優勢：
- 確保整個表格在必要時能作為一個整體移動至下一頁
- 防止標題與資料列分離
- 允許進行額外的樣式與間距控制
- 讓您更輕鬆地為表格添加永久保留的標題或說明
哪些進階 CSS3 設定會控制分頁位置？
為提供更佳的控制力，請在 thead 群組之外，額外使用 CSS3：
<style type="text/css">
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
</style><style type="text/css">
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
</style>哪些 CSS 屬性最適合用於複雜的版面配置？
對於複雜的版面配置，請結合使用多個 CSS 屬性：
page-break-inside- 防止元素被分割page-break-after- 強制在元素後換行page-break-before- 強制在元素前換行orphans和widows- 控制分頁時的最小行數break-inside,break-after,break-before- 現代 CSS3 替代方案
這些屬性相互配合，可生成版面流暢且易於閱讀的 Professional 級 PDF 文件。
如何排除分頁問題？
當分頁效果不如預期時：
- 確認您的 HTML 結構是否有效
- 確認樣式已套用至區塊級元素
- 先使用簡單範例進行測試，再增加複雜度
- 使用瀏覽器開發者工具檢查計算出的樣式
- 建議使用 IronPDF 的渲染選項以獲得更多控制權
請注意，不同的 PDF 渲染器處理分頁的方式可能略有不同，因此針對您的具體使用情境進行測試，對於在所有情境下獲得一致的結果至關重要。
常見問題
在 C# 中將 HTML 轉換為 PDF 時，該如何插入分頁？
若要在使用 IronPDF 時插入分頁，請在 HTML 程式碼中欲插入分頁的位置加入 `
` 至 HTML 程式碼中。IronPDF 的 ChromePdfRenderer 會識別此 CSS 屬性，並在 PDF 文件中的該位置建立新頁面。在 PDF 轉換過程中，哪個 CSS 屬性最能可靠地控制分頁位置？
在使用 IronPDF 時，CSS 屬性 `page-break-after: always;` 是最可靠的方法。此屬性可在不同渲染引擎間提供一致的結果，並確保轉換後的 PDF 文件具有可預測的分頁效果。
如何防止表格或圖片內出現換行？
為避免表格或圖片內出現不必要的換行，請使用 `page-break-inside: avoid;` CSS 屬性。當使用 IronPDF 將 HTML 轉換為 PDF 時，此樣式可確保您的表格和圖片完整保留於單一頁面，而非被分割至多個頁面。
哪些 HTML 元素最適合搭配分頁樣式使用？
分頁功能在 `
我能否在 CSS 層級控制分頁，而非使用內聯樣式？
是的，您可以透過 CSS 層級設定分頁樣式，而非使用內嵌樣式。IronPDF 的渲染引擎完全支援 CSS 樣式表，讓您能在 CSS 檔案中定義分頁規則，並維持更簡潔、更易維護的 HTML 程式碼。
為什麼應該使用 `page-break-after` 而不是 `page-break-before`？
相較於 `page-break-before`，`page-break-after` 屬性能在不同渲染引擎間提供更一致的結果。當使用 IronPDF 建立具有複雜版面的 PDF 時，page-break-after 可確保分頁行為更為可預測且可靠。
還在往下捲動嗎？
想要快速確認成果嗎？ PM > Install-Package IronPdf
執行範例 觀看您的 HTML 轉為 PDF。
立即免費開始
立即免費開始
預約免費線上示範
無需信用卡或註冊帳號
