1. IronPDF
  2. 操作指南
  3. 分页符
如何在HTML到PDF页面中处理断页

使用 C# 在 HTML PDF 中添加或避免分页符

Curtis Chau
Curtis Chau
已更新:
This article was translated from English: Does it need improvement?
Translated
View the article in English

通过在HTML元素中添加page-break-inside: avoid;控制PDF文档中的分页。

IronPDF 支持 PDF 文档中的分页符。 PDF 文档和 HTML 的一个主要区别是 HTML 文档通常是滚动的，而 PDF 是多页的，可以打印。 将 HTML 字符串转换为 PDF 时，开发人员通常需要精确控制页面断开的位置，以确保文档外观专业。

快速入门：在 HTML 转 PDF 转换中实现分页符

using 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

  1. 使用 NuGet 包管理器安装 https://www.nuget.org/packages/IronPdf

    PM > Install-Package IronPdf

  2. 复制并运行这段代码。

    new IronPdf.ChromePdfRenderer()
  .RenderHtmlAsPdf("<html><body><h1>Hello World!</h1><div style='page-break-after: always;'></div></body></html>")
  .SaveAs("pageWithBreaks.pdf");

  3. 部署到您的生产环境中进行测试

    通过免费试用立即在您的项目中开始使用IronPDF

    arrow pointer

最小工作流程（5 个步骤）

IronPDF 推广指南，展示 HTML PDF 分页的 4 个步骤及 NuGet 安装命令
  1. 下载 C# 库以在 PDF 中使用分页符。
  2. 将分页符应用于 HTML 字符串并将其转换为 PDF
  3. 在page-break-inside属性上设置avoid以避免图像中的分页
  4. 对表格也要这样做，以避免表格中出现分页符
  5. 在 CSS 级别设置样式


如何在 HTML 到 PDF 之间添加分页符？

要在 HTML 中创建分页符，请在 HTML 代码中使用此方法：

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

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

上面的代码生成一个包含2页的PDF：img在第二页上：

如何防止图像出现断页？

若要避免在图像或div元素应用CSS avoid属性。 当使用 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属性最可靠地应用于块级元素。 图片默认为内联元素，因此要对其进行包装，以确保正确应用样式。 在处理需要在 PDF 格式中保持结构的 响应式 CSS 布局时，这种方法尤其有用。

图像断页的常见问题有哪些？

常见问题包括图像被分割到不同页面、页面边界部分呈现、标题或相关文本丢失。 当图片靠近页面底部时，经常会出现这些问题。 使用page-break-inside: avoid包装器可以通过将整个图像及其容器作为一个单元移动到下一页来防止这些问题。

:path=/static-assets/pdf/content-code-examples/how-to/html-to-pdf-page-breaks-7.cs
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
Icon Quote related to 图像断页的常见问题有哪些？

我最喜欢的这种库是 IronPDF。它允许快速高效地操作 PDF 文件。它还具有许多有价值的功能，比如导出为 PDF/A 格式和数字签名 PDF 文档。

Milan Jovanovic related to 图像断页的常见问题有哪些？

Milan Jovanovic

微软MVP

查看案例研究
Icon Quote related to 图像断页的常见问题有哪些？

IronOCR 意味着我们每年可以节省 $40,000 的人工处理成本，同时提高生产力，并释放资源用于高影响任务。我强烈推荐它。

Brent Matzelle related to 图像断页的常见问题有哪些？

Brent Matzelle

首席技术官，OPYN

查看案例研究
Icon Quote related to 图像断页的常见问题有哪些？

Iron Suite 在我们的运营中起着至关重要的作用。这些工具提高了业务各方面的效率，包括创建平面图和改善库存管理。

David Jones related to 图像断页的常见问题有哪些？

David Jones

首席软件工程师，Agorus Build

查看案例研究

如何避免表格中的分页符？

如上所示，可以使用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>
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

哪些 CSS 属性最适合复杂布局？

对于复杂的布局，应结合多个 CSS 属性：

  • page-break-inside - 防止元件拆分
  • page-break-after - 强迫在元素之后分页
  • page-break-before - 强迫在元素之前分页
  • orphans 与 widows - 控制分页符处的最小行数
  • break-inside, break-after, break-before - 现代CSS3替代品

这些属性共同作用，创建出具有适当流程和可读性的专业外观 PDF。

如何解决分页问题？

分页符无法正常工作时： 1.验证您的 HTML 结构是否有效 2.检查样式是否应用于块级元素 3.先用简单的例子进行测试，然后增加复杂性 4.使用浏览器开发工具检查计算样式 5.考虑使用 IronPDF 的渲染选项进行额外控制

请记住，不同的 PDF 呈现器在处理分页符时可能会略有不同，因此根据您的具体使用情况进行测试对于在所有情况下实现一致的结果非常重要。

常见问题解答

用 C# 将 HTML 转换为 PDF 时，如何添加分页符？

要在使用IronPDF时添加分页符，请在您希望分页的HTML代码中插入<div style="page-break-after: always;"></div>。IronPDF的ChromePdfRenderer将识别此CSS属性，并在PDF文档的该点创建新页面。

在 PDF 转换中控制分页符最可靠的 CSS 属性是什么？

page-break-after: always; CSS属性是使用IronPDF时最可靠的方法。此属性在不同的渲染引擎中提供一致的结果，并确保转换后的PDF文档中具有可预测的分页。

如何防止表格或图片内出现分页符？

要防止在表格或图像中出现不必要的分页，请使用page-break-inside: avoid; CSS属性。在使用IronPDF将HTML转换为PDF时，此样式确保您的表格和图像保持完整在单个页面上，而不是分散到多个页面。

哪些 HTML 元素最适合使用分页符样式？

分页符在块级元素如<div>、<table>和<section>上效果最佳。IronPDF建议在转换HTML为PDF时，将内容包裹在具有分页样式的专用<div>元素中，以获得最可靠的结果。

我能否在 CSS 层面控制分页符而不是内联样式？

是的，您可以在 CSS 层设置分页符样式，而不是使用内联样式。IronPDF 的渲染引擎完全支持 CSS 样式表，允许您在 CSS 文件中定义分页符规则，并维护更简洁、更易维护的 HTML 代码。

为什么要使用 page-break-after 而不是 page-break-before？

page-break-after属性相比page-break-before在不同渲染引擎中提供更一致的结果。当使用IronPDF创建复杂布局的PDF时，page-break-after确保更可预测和可靠的分页行为。

Curtis Chau
Curtis Chau
  立即与工程团队聊天
技术作家

Curtis Chau 拥有卡尔顿大学的计算机科学学士学位，专注于前端开发，精通 Node.js、TypeScript、JavaScript 和 React。他热衷于打造直观且美观的用户界面，喜欢使用现代框架并创建结构良好、视觉吸引力强的手册。

除了开发之外，Curtis 对物联网 (IoT) 有浓厚的兴趣，探索将硬件和软件集成的新方法。在空闲时间，他喜欢玩游戏和构建 Discord 机器人，将他对技术的热爱与创造力相结合。

准备开始了吗？
Nuget 下载 20,296,129 | 版本: 2026.7 刚刚发布
Still Scrolling Icon

还在滚动吗？

想快速获得证据？ PM > Install-Package IronPdf
运行示例看着你的HTML代码变成PDF文件。