在HTML PDF中加入或避免分頁符號
通過在HTML元素中加入page-break-inside: avoid;來控制PDF文件中的分頁符號。
IronPDF支持PDF文件中的分頁符號。 PDF文件和HTML的主要區別之一是HTML文件通常會滾動，而PDF是多頁面的且可以列印。 當將HTML字串轉換為PDF時，開發者經常需要精確控制頁面在哪裡分隔以確保專業外觀的文件。
快速入門：在HTML到PDF轉換中實施分頁符號
使用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
最小工作流程 (5步)
- 下載C#程式庫以在PDF中使用分頁符號
- 應用分頁符號於HTML字串並將其轉換為PDF
- 在
page-break-inside屬性上設置避免以避免圖片中出現分頁符號 - 對於表格進行同樣的操作以避免表格中出現分頁符號
- 在CSS層級設置樣式
我如何在HTML到PDF中加入分頁符號？
要在HTML中建立分頁符號，請在HTML程式碼中使用以下內容：
<div style="page-break-after: always;"></div><div style="page-break-after: always;"></div>page-break-after CSS屬性是當將HTML渲染為PDF時最可靠的分頁控制方法。 該屬性告訴PDF渲染器在包含此樣式的元素後立即插入分頁符號。 當使用自定義邊距或特定頁面佈局時，分頁符號確保內容出現在預期位置。
為何page-break-after比其他方法更好用？
在此範例中，我在HTML中有以下table後新增分頁符號來實現。 page-break-before或手動間距，在不同的渲染引擎中提供了更一致的結果。 當建立新PDF文件並使用複雜的佈局時，這種方法確保了可預測的分頁。
我應該使用哪些元素來實現分頁符號？
分頁符號在如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")上面的程式碼產生了一個包含兩頁的PDF：第一頁是img：
我如何避免圖片中的分頁符號？
為了避免在圖片或table中出現分頁符號，請使用CSS div元素。 在使用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屬性在塊級別元素上最為可靠。 預設情況下，圖片是內聯元素，因此包裝它們可以確保樣式正確應用。 這種方法在處理a 響應式CSS佈局時特別有用，因為這些布局需要在PDF格式中保持其結構。
圖片分頁符號常見問題有哪些？
常見的問題包括圖片被分割在多個頁面上、圖片部分呈現在頁面邊界以及標題或相關文字的丟失。 這些問題通常出現在圖片在頁面底部附近時發生。 使用page-break-inside: avoid包裹器可以防止這些問題，確保整個圖片及其容器作為一個單元移動到下一頁。
:path=/static-assets/pdf/content-code-examples/how-to/html-to-pdf-page-breaks-7.csusing 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設置可控制分頁符號？
為了提供更大的控制權，使用CSS3以及您的thead組：
<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-before- 現代CSS3的替代選項
這些屬性會一同運作，以創造外觀專業的PDF，並保持合適的流暢性和可讀性。
我如何排查分頁問題？
當分頁不能如預期運作時：
- 驗證您的HTML結構是否有效
- 確保樣式應用於塊級別元素
- 首先用簡單的例子測試，然後增加複雜度
- 使用瀏覽器開發人員工具檢查計算好的樣式
- 考慮使用IronPDF的渲染選項來獲得更多控制
請記住，不同的PDF渲染器可能會稍微不同地處理分頁符號，因此，針對您的特定使用案例進行測試對於在所有情境中獲得一致的結果至關重要。
常見問題
如何在C#中將HTML轉換為PDF時新增分頁符號？
要使用IronPDF新增分頁符號，請在需要新增分頁符號的HTML程式碼中插入<div style="page-break-after: always;"></div>。IronPDF的ChromePdfRenderer將識別這個CSS屬性並在PDF文件中建立新頁。
哪個CSS屬性是控制PDF轉換分頁最可靠的？
page-break-after: always; 是使用IronPDF時最可靠的方法。該屬性在不同的渲染引擎中提供了一致的結果，並確保您的轉換PDF文件中具有可預測的分頁。
如何防止表格或圖像中出現分頁符號？
為了防止表格或圖像中出現不必要的分頁符號，請使用page-break-inside: avoid; CSS屬性。在使用IronPDF轉換HTML為PDF時，該樣式確保您的表格和圖像保持在單個頁面中，不會跨多個頁面分割。
哪些HTML元素最適合分頁樣式？
分頁在<div>、<table>和<section>等區塊級元素上最有效。IronPDF建議將內容包裝在一個專用的
我可以在CSS層級而不是內嵌樣式中控制分頁符號嗎？
是的，您可以在CSS層級設置分頁符號樣式，而不是使用內嵌樣式。IronPDF的渲染引擎完全支持CSS樣式表，允許您在CSS文件中定義分頁規則，保持更清晰且更易維護的HTML程式碼。
為什麼應該使用page-break-after而不是page-break-before？
page-break-after屬性相較於page-break-before在不同的渲染引擎中提供了更一致的結果。使用IronPDF建立具有複雜佈局的PDF時，page-break-after可確保更可預測且更可靠的分頁行為。
還在捲動嗎？
想快速獲得證明嗎？ PM > Install-Package IronPdf
執行範例 看您的HTML變成PDF。
免費開始
免費開始
預訂免費直播演示
