1. IronPDF
  2. 操作指南
  3. 分頁符號

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

This article was translated from English: Does it need improvement?
Translated
View the article in English

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

開始使用 IronPDF

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

第一步：
green arrow pointer

HTML PDF 中如何使用分頁符號

HTML PDF 中如何使用分頁符號
  1. 下載 C# 庫以在 PDF 中使用分頁符號
  2. 將分頁符應用於HTML字符串並將其轉換為PDF
  3. 設置避免避免圖片分頁的 page-break-inside 屬性
  4. 對表格做同樣的處理以避免表格中的分頁符。
  5. 在 CSS 級別設置樣式


新增分頁符

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

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

示範創建分頁符

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

表格

公司產品
Iron SoftwareIronPDF
Iron SoftwareIronOCR

圖片

Ironpdf Logo Text Dotnet related to 圖片
: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")
VB   C#

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

避免圖片中的分頁符

要避免圖像或表格內的分頁，您可以使用應用於包裹 DIV 元素的 css page-break-inside 屬性。

<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