1. IronPDF
2. Cómo Hacer
3. Saltos de página

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.

Primer Paso:

Empezar gratis

Cómo usar saltos de página en PDF HTML

1. Descargar biblioteca C# para usar saltos de página en PDF
2. Aplicar saltos de página a una cadena HTML y convertirla a PDF
3. Establecer evite on atributo page-break-inside para evitar saltos de página en imágenes
4. Haga lo mismo con la tabla para evitar saltos de página en las tablas
5. 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

Imagen

: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")

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>