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.

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 page-break-inside attribute to evite Page Breaks in Images
4. Do the same thing for table to evite Page Breaks in Tables
5. Establecer style at the CSS Level

Instalar con NuGet

Install-Package IronPdf

nuget.org/packages/IronPdf/

o

Descargar DLL

Descargar DLL

Instalar manualmente en su proyecto

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>