Adicionar ou evitar quebras de página em PDFs HTML com C
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.
-
Instale IronPDF com o Gerenciador de Pacotes NuGet
PM > Install-Package IronPdf -
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"); -
Implante para testar em seu ambiente de produção.
Comece a usar IronPDF em seu projeto hoje com uma avaliação gratuita
Fluxo de trabalho mínimo (5 etapas)
- Baixe a biblioteca C# para usar quebras de página em PDFs.
- Aplicar quebras de página à string HTML e convertê-la em PDF.
- Defina o atributo **`avoid`** em `page-break-inside` para evitar quebras de página em imagens.
- Faça o mesmo para as tabelas para evitar quebras de página.
- Defina o estilo no nível do CSS.
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>
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>
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" />
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")
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>
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")
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>
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>
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 dividampage-break-after: always- Força uma quebra após um elementopage-break-before: always- Força uma quebra de linha antes de um elementoorphansewidows- Controlam o número mínimo de linhas nas quebras de páginabreak-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:
- Verifique se a sua estrutura HTML é válida.
- Verifique se os estilos estão sendo aplicados aos elementos de bloco.
- Teste primeiro com exemplos simples e depois adicione complexidade.
- Use as ferramentas de desenvolvedor do navegador para inspecionar os estilos computados.
- 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 `

