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
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
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 usar el atributo CSS page-break-inside aplicado a un elemento DIV contenedor.
<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. Es mejor aplicar esto a un DIV envolvente que a la tabla en sí misma para asegurar que el estilo se aplique a un nodo html de nivel bloque.
Para duplicar encabezados y pies de página de tablas en cada página de una tabla HTML grande que abarque múltiples páginas de pdf, puede usar un grupo <thead> 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 desees usar CSS3 además de tu 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>
