Añadir o evitar saltos de página en PDF HTML
IronPDF admite saltos de página en los documentos PDF. Una diferencia importante entre los documentos PDF y HTML es que los documentos HTML tienden a desplazarse, mientras que los PDF tienen varias páginas y pueden imprimirse.
Comience con IronPDF
Comience a usar IronPDF en su proyecto hoy con una prueba gratuita.
Cómo usar saltos de página en PDF HTML
- Descargar biblioteca C# para usar saltos de página en PDF
- Aplicar saltos de página a una cadena HTML y convertirla a PDF
- Establecereviteon atributo page-break-inside para evitar saltos de página en imágenes
- Haga lo mismo con la tabla para evitar saltos de página en las tablas
- Definir el estilo a nivel CSS
Añadir un salto de página
Para crear un salto de página en HTML puede utilizar esto en su código HTML:
<div style='page-break-after: always;'> </div>
Demostración de la creación de un salto de página
En este ejemplo tengo la siguiente tabla e imagen en mi HTML y me gustaría que estuvieran en dos páginas separadas añadiendo un salto de página después de la tabla.
Cuadro
| Empresa | Producto |
|---|---|
| Iron Software | IronPDF |
| Iron Software | IronOCR |
Imagen
:path=/static-assets/pdf/content-code-examples/how-to/html-to-pdf-page-breaks-page-break.csusing 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")Y el código de arriba generará el PDF de abajo que tiene 2 páginas, la Tabla en la Primera página y la Imagen en la segunda:
Evitar los saltos de página en las imágenes
Para evitar un salto de página dentro de una imagen o tabla puede utilizar el atributo css page-break-inside aplicado a un elemento DIV envolvente.
<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>Evitar saltos de página en las tablas
Como se ha mostrado anteriormente, los saltos de página dentro de las tablas pueden evitarse utilizando el CSS:
page-break-inside: avoid. Esto se aplica mejor a un DIV envolvente que a la propia tabla para asegurar que el estilo se aplica a un nodo html de nivel block.
Para duplicar los encabezados y pies de página de una tabla HTML de gran tamaño que abarque varias páginas pdf, puede utilizar un <thead> grupo dentro de la tabla:
<thead>
<tr>
<th>C Sharp</th><th>VB</th>
</tr>
</thead><thead>
<tr>
<th>C Sharp</th><th>VB</th>
</tr>
</thead>Configuración avanzada de CSS3
Para tener un mayor control, es posible que desee utilizar CSS3 además de su 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>
