HTML轉PDF：使用 C# 在 PDF 中新增或避免分頁符

Q: 哪些 HTML 元素最適合使用分頁樣式？

分頁符對分塊級元素（如 ` `、` ` 和 ` `）最有效。IronPDF 建議在轉換 HTML 為 PDF 時，將內容包裝在具有分頁樣式的專用 ` ` 元素中，以獲得最可靠的結果。

更新:2025年12月14日

Translated

View the article in English

透過在 HTML 元素中新增 page-break-after: always; 來控制 PDF 文件中的分頁符，或在使用IronPDF in C# 將 HTML 轉換為 PDF 時，透過 page-break-inside: avoid; 來封鎖分頁符。

IronPDF支援PDF文件內的分頁符號。 PDF 文件和 HTML 文件的一個主要區別在於，HTML 文件可以捲動，而 PDF 文件是多頁的，可以列印。將 HTML 字串轉換為 PDF時，開發人員通常需要精確控制頁面斷點，以確保文件外觀專業。

快速入門：HTML轉PDF 時實作分頁符號控制

使用IronPDF將 HTML 轉換為帶有分頁符號的 PDF。此範例示範如何在特定的 HTML 內容後插入分頁符，以確保正確的分頁。透過新增 page-break-after: always; 樣式，開發人員可以控制分頁符號的出現位置，從而提高產生的 PDF 文件的可讀性和組織性。

使用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
設定 page-break-inside 屬性的**avoid**屬性，以避免在影像中出現分頁符號。
對表格也採取同樣的措施，以避免表格中出現分頁符號。
在 CSS 圖層設定樣式

如何在HTML中為PDF新增分頁符號？

若要在 HTML 中建立分頁符，請在 HTML 程式碼中使用下列程式碼：

<div style="page-break-after: always;"></div>

<div style="page-break-after: always;"></div>

HTML

將 HTML 渲染為 PDF 時，CSS 屬性是控制分頁最可靠的方法。此屬性指示 PDF 渲染器在包含此樣式的元素後立即插入分頁符號。使用自訂邊距或特定頁面佈局時，分頁符號可確保內容出現在預期的位置。

為什麼使用 page-break-after 比其他方法效果更好？

在這個例子中，我的 HTML 中有以下表格和圖像，我希望透過在表格後面加上分頁符號將它們顯示在兩個單獨的頁面上。與 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>

HTML

影像

<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" />

HTML

如何在C#程式碼中實作分頁符號？

:path=/static-assets/pdf/content-code-examples/how-to/html-to-pdf-page-breaks-page-break.cs

using 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")

$vbLabelText $csharpLabel

上面的程式碼會產生一個包含兩頁的PDF檔案：第一頁是表格，第二頁是圖片：

如何防止圖片出現分頁符號？

若要避免在圖片或表格中出現分頁符，請使用 CSS 屬性 page-break-inside 套用於包裝 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>

HTML

為什麼要將圖片包裹在 DIV 元素中？

將圖片包裹在 DIV 元素中可以更好地控制分頁行為。 page-break-inside: avoid 屬性在區塊級元素上最可靠。圖片預設是行內元素，所以用包裝紙包裹圖片可以確保樣式正確套用。當需要以 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")

$vbLabelText $csharpLabel

如何避免表格中出現分頁符號？

如上所示，可以使用 CSS 避免表格內出現分頁符號 page-break-inside: 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>

HTML

<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>

HTML