Como lidar com quebras de página de HTML para PDF usando C#

Adicionar ou evitar quebras de página em PDFs HTML com C

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

Controle as quebras de página em documentos PDF adicionando page-break-after: always; aos elementos HTML ou impedindo as quebras com page-break-inside: avoid; ao converter HTML para PDF usando o IronPDF em C#.

O IronPDF suporta quebras de página em documentos PDF. Uma das principais diferenças entre documentos PDF e HTML é que os documentos HTML tendem a ter rolagem, enquanto os PDFs são compostos por várias páginas e podem ser impressos. Ao converter strings HTML em PDF , os desenvolvedores frequentemente precisam de controle preciso sobre onde as páginas são quebradas para garantir documentos com aparência profissional.

Guia rápido: Implementando quebras de página na conversão de HTML para PDF

Converter HTML para PDF com quebras de página usando o IronPDF. Este exemplo demonstra como inserir uma quebra de página após um conteúdo HTML específico para garantir a paginação correta. Ao adicionar o estilo page-break-after: always;, os desenvolvedores controlam onde as quebras de página ocorrem, melhorando a legibilidade e a organização do documento PDF resultante.

  1. Instale IronPDF com o Gerenciador de Pacotes NuGet

    PM > Install-Package IronPdf
  2. Copie e execute este trecho de código.

    new IronPdf.ChromePdfRenderer()
      .RenderHtmlAsPdf("<html><body><h1>Hello World!</h1><div style='page-break-after: always;'></div></body></html>")
      .SaveAs("pageWithBreaks.pdf");
  3. Implante para testar em seu ambiente de produção.

    Comece a usar IronPDF em seu projeto hoje com uma avaliação gratuita

    arrow pointer


Como adiciono uma quebra de página em HTML para PDF?

Para criar uma quebra de página em HTML, use o seguinte no seu código HTML:

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

A propriedade CSS page-break-after é o método mais confiável para controlar a paginação ao renderizar HTML para PDF. Essa propriedade instrui o renderizador de PDF a inserir uma quebra de página imediatamente após o elemento que contém esse estilo. Ao trabalhar com margens personalizadas ou layouts de página específicos, as quebras de página garantem que o conteúdo apareça exatamente onde foi planejado.

Por que a quebra de página após a quebra de página funciona melhor do que outros métodos?

Neste exemplo, tenho a seguinte tabela e imagem no meu HTML e quero que elas apareçam em duas páginas separadas, adicionando uma quebra de página após a tabela. A propriedade page-break-after proporciona resultados mais consistentes em diferentes mecanismos de renderização em comparação com alternativas como page-break-before ou espaçamento manual. Ao criar novos PDFs com layouts complexos, essa abordagem garante uma paginação previsível.

Que elementos devo usar para quebras de página?

As quebras de página funcionam de forma eficaz com elementos de nível de bloco como <div>, <section> e <article>. Embora seja possível aplicar estilos de quebra de página a vários elementos HTML, envolver o conteúdo em um elemento <div> dedicado proporciona os resultados mais confiáveis. Isso é particularmente importante ao trabalhar com cabeçalhos e rodapés que precisam aparecer de forma consistente em todas as páginas.

Mesa

<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

Imagem

<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

Como implementar quebras de página em código 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

O código acima gera um PDF com 2 páginas: a tabela na primeira página e a imagem na segunda:

Como faço para evitar quebras de página em imagens?

Para evitar uma quebra de página dentro de uma imagem ou tabela, use o atributo CSS page-break-inside aplicado a um elemento envolvente DIV. Essa técnica é essencial para manter a integridade visual ao depurar HTML com o Chrome , garantindo que seus PDFs sejam renderizados exatamente como pretendido.

<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

Por que devo envolver imagens em elementos DIV?

Envolver imagens em elementos DIV proporciona um melhor controle sobre o comportamento das quebras de página. A propriedade page-break-inside: avoid funciona de forma mais confiável em elementos de nível de bloco. Por padrão, as imagens são elementos embutidos, portanto, envolvê-las em um bloco garante que o estilo seja aplicado corretamente. Essa abordagem é particularmente útil ao trabalhar com layouts CSS responsivos que precisam manter sua estrutura no formato PDF.

Quais são os problemas comuns com quebras de página em imagens?

Problemas comuns incluem imagens divididas entre páginas, renderização parcial nos limites da página e perda de legendas ou texto associado. Esses problemas costumam ocorrer quando as imagens estão próximas da parte inferior da página. O uso do wrapper page-break-inside: avoid evita esses problemas, garantindo que toda a imagem e seu contêiner se movam para a próxima página como uma unidade.

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

Como posso evitar quebras de página em tabelas?

Como mostrado acima, as quebras de página dentro das tabelas podem ser evitadas usando o CSS page-break-inside: avoid. Isso se aplica melhor a um elemento envolvente DIV do que à própria tabela, para garantir que o estilo seja aplicado a um nó HTML de nível de bloco. Ao criar tutoriais completos de HTML para PDF , a formatação adequada de tabelas é crucial para a legibilidade.

Quando devo usar o cabeçalho "thead" para tabelas?

Para duplicar os cabeçalhos e rodapés de uma tabela HTML grande em todas as páginas de um PDF, use um grupo <thead> dentro da tabela:

<thead>
    <tr>
        <th>C Sharp</th><th>VB</th>
    </tr>
</thead>
<thead>
    <tr>
        <th>C Sharp</th><th>VB</th>
    </tr>
</thead>
HTML

O elemento <thead> garante que os cabeçalhos da tabela se repitam em cada página quando uma tabela abrange várias páginas. Isso é particularmente útil para relatórios financeiros, listas de dados e qualquer documento onde o contexto seja necessário em todas as páginas. Para a configuração inicial e visão geral da instalação , o IronPDF lida com esses padrões HTML automaticamente.

Por que é importante envolver tabelas em DIVs?

Envolver tabelas em elementos DIV com controles de quebra de página oferece diversas vantagens:

  • Garante que a tabela inteira se mova como uma unidade para a próxima página, se necessário.
  • Impede que os cabeçalhos sejam separados das linhas de dados
  • Permite maior controle de estilo e espaçamento
  • Facilita a adição de legendas ou descrições que acompanham a tabela.

Quais configurações avançadas de CSS3 controlam as quebras de página?

Para obter maior controle, use CSS3 em conjunto com o seu grupo thead:

<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

Quais propriedades CSS funcionam melhor para layouts complexos?

Para layouts complexos, combine várias propriedades CSS:

  • page-break-inside: avoid - Impede que os elementos se dividam
  • page-break-after: always - Força uma quebra após um elemento
  • page-break-before: always - Força uma quebra de linha antes de um elemento
  • orphans e widows - Controlam o número mínimo de linhas nas quebras de página
  • break-inside, break-after, break-before - Alternativas modernas ao CSS3

Essas propriedades trabalham em conjunto para criar PDFs com aparência profissional, fluxo adequado e legibilidade.

Como posso solucionar problemas de quebra de página?

Quando as quebras de página não funcionam como esperado:

  1. Verifique se a sua estrutura HTML é válida.
  2. Verifique se os estilos estão sendo aplicados aos elementos de bloco.
  3. Teste primeiro com exemplos simples e depois adicione complexidade.
  4. Use as ferramentas de desenvolvedor do navegador para inspecionar os estilos computados.
  5. Considere usar as opções de renderização do IronPDF para obter controle adicional.

Lembre-se de que diferentes renderizadores de PDF podem lidar com quebras de página de maneiras ligeiramente diferentes, portanto, testar com seu caso de uso específico é importante para obter resultados consistentes em todos os cenários.

Perguntas frequentes

Como adiciono uma quebra de página ao converter HTML para PDF em C#?

Para adicionar uma quebra de página ao usar o IronPDF, insira `

Insira a propriedade `` no seu código HTML no ponto onde deseja que a quebra de página ocorra. O ChromePdfRenderer do IronPDF reconhecerá essa propriedade CSS e criará uma nova página nesse ponto do documento PDF.

Qual propriedade CSS é mais confiável para controlar quebras de página na conversão de PDF?

A propriedade CSS `page-break-after: always;` é o método mais confiável ao usar o IronPDF. Essa propriedade proporciona resultados consistentes em diferentes mecanismos de renderização e garante uma paginação previsível em seus documentos PDF convertidos.

Como posso impedir quebras de página dentro de tabelas ou imagens?

Para evitar quebras de página indesejadas em tabelas ou imagens, use a propriedade CSS `page-break-inside: avoid;`. Ao converter HTML para PDF com o IronPDF, esse estilo garante que suas tabelas e imagens permaneçam intactas em uma única página, em vez de serem divididas em várias páginas.

Quais elementos HTML funcionam melhor com estilos de quebra de página?

As quebras de página funcionam de forma mais eficaz com elementos de bloco como `

`, ` `, e `
O IronPDF recomenda envolver o conteúdo em um elemento `` dedicado.
O elemento ` com o estilo de quebra de página proporciona os resultados mais confiáveis na conversão de HTML para PDF.

Posso controlar as quebras de página no nível do CSS em vez de usar estilos embutidos?

Sim, você pode definir estilos de quebra de página no nível do CSS em vez de usar estilos embutidos. O mecanismo de renderização do IronPDF oferece suporte completo a folhas de estilo CSS, permitindo que você defina regras de quebra de página em seu arquivo CSS e mantenha um código HTML mais limpo e fácil de manter.

Por que devo usar `page-break-after` em vez de `page-break-before`?

A propriedade `page-break-after` proporciona resultados mais consistentes em diferentes mecanismos de renderização em comparação com `page-break-before`. Ao usar o IronPDF para criar PDFs com layouts complexos, `page-break-after` garante um comportamento de paginação mais previsível e confiável.

Curtis Chau
Redator Técnico

Curtis Chau é bacharel em Ciência da Computação (Universidade Carleton) e se especializa em desenvolvimento front-end, com experiência em Node.js, TypeScript, JavaScript e React. Apaixonado por criar interfaces de usuário intuitivas e esteticamente agradáveis, Curtis gosta de trabalhar com frameworks modernos e criar manuais ...

Leia mais
Pronto para começar?
Nuget Downloads 18,318,263 | Versão: 2026.4 acaba de ser lançado
Still Scrolling Icon

Ainda está rolando a tela?

Quer provas rápidas? PM > Install-Package IronPdf
executar um exemplo Veja seu HTML se transformar em um PDF.

Equipe de suporte de ferro

Estamos online 24 horas por dia, 5 dias por semana.
Bater papo
E-mail
Liga para mim