在 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中创建页面断开,您可以在HTML代码中使用这个:

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

演示创建分页符

在这个示例中,我的HTML中有以下表格和图片,我希望通过在表格后添加分页符让它们分别在两个不同的页面上显示。

表格

公司产品
铁软件IronPDF
铁软件IronOCR

图像

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 文件,它有两页,第一页是表格,第二页是图像:

避免在图像中出现分页符

要避免图像或表格内的分页符,您可以使用应用于包装 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