在 HTML PDF 中新增或避免分頁符號

查克尼思·賓

2023年1月25日

已更新 2025年2月5日

Translated

View the article in English

IronPDF 支持 PDF 文檔中的分頁符。 PDF文件與HTML的一個主要差異在於HTML文件傾向於滾動，而PDF則是多頁的，並且可以打印。

開始使用 IronPDF

立即在您的專案中使用IronPDF，並享受免費試用。

第一步：

HTML PDF 中如何使用分頁符號

下載 C# 庫以在 PDF 中使用分頁符
將分頁符應用於 HTML 字串並轉換為 PDF
將頁面內部的中斷屬性設為avoid，以避免圖像中的分頁符號
對表格執行相同動作以避免表格中的分頁符號
在 CSS 層級設置樣式

新增分頁符

要在HTML中創建頁面中斷，您可以在HTML代碼中使用以下內容：

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

示範創建分頁符

在此示例中，我的 HTML 包含下表和圖像，我希望通過在表格後添加分頁符將它們分開放置在兩個不同的頁面上。

表格

公司

圖片

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

上面的代碼將生成以下 PDF，該 PDF 有 2 頁，第一頁是表格，第二頁是圖像：

避免圖片中的分頁符

為了避免在圖像或表格內發生分頁中斷，您可以將 page-break-inside CSS 屬性應用於包裹的 DIV 元素。

<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

避免表格中的分頁

如上所示，可以透過使用 CSS 來避免表格中的分頁：

page-break-inside: avoid 這應該更好地應用在一個包裹的 DIV 上而不是表格本身，以確保樣式應用於塊級別的 HTML 節點。

要在多個 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

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

查克尼思·賓

立即與工程團隊聊天

軟體工程師

Chaknith 致力於 IronXL 和 IronBarcode。他在 C# 和 .NET 方面擁有豐富的專業知識，協助改進軟體並支持客戶。他從用戶互動中獲得的洞察力有助於提高產品、文檔和整體體驗。