Añadir o evitar saltos de página en PDF HTML con C

Actualizado:14 de diciembre de 2025

Translated

View the article in English

Controla los saltos de página en documentos PDF añadiendo page-break-after: always; a elementos HTML o previniendo saltos con page-break-inside: avoid; al convertir HTML a PDF usando IronPDF en C#.

IronPDF soporta saltos de página dentro de documentos PDF. Una gran diferencia entre los documentos PDF y el HTML es que los documentos HTML tienden a desplazarse, mientras que los PDFs son de varias páginas y se pueden imprimir. Al convertir cadenas HTML a PDF, los desarrolladores a menudo necesitan un control preciso sobre dónde se rompen las páginas para garantizar documentos de aspecto profesional.

Inicio rápido: Implementación de saltos de página en la conversión de HTML a PDF

Convierta HTML a PDF con saltos de página utilizando IronPDF. Este ejemplo muestra cómo insertar un salto de página después de un contenido HTML específico para garantizar una paginación correcta. Al agregar el estilo page-break-after: always;, los desarrolladores controlan dónde ocurren los saltos de página, mejorando la legibilidad y la organización del documento PDF resultante. <div> <section> <article> <div> page-break-inside DIV page-break-inside: avoid page-break-inside: avoid DIV <thead> page-break-inside: avoid page-break-after: always page-break-before: always orphans widows break-inside break-after break-before

Instala IronPDF con el Administrador de Paquetes NuGet
PM > Install-Package IronPdf

Copie y ejecute este fragmento 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");

Despliegue para probar en su entorno real

Comienza a usar IronPDF en tu proyecto hoy mismo con una prueba gratuita

Flujo de trabajo mínimo (5 pasos)

Descargar biblioteca C# para usar saltos de página en PDF
Aplicar saltos de página a la cadena HTML y convertirla a PDF
Configura evitar en el atributo page-break-inside para evitar saltos de página en imágenes
Haga lo mismo con las tablas para evitar saltos de página en las tablas
Configurar el estilo a nivel de CSS

¿Cómo añadir un salto de página en HTML a PDF?

Para crear un salto de página en HTML, utilice esto en su código HTML:

<div style="page-break-after: always;"></div>

<div style="page-break-after: always;"></div>

HTML

La propiedad CSS page-break-after es el método más confiable para controlar la paginación al renderizar HTML a PDF. Esta propiedad indica al renderizador de PDF que inserte un salto de página inmediatamente después del elemento que contiene este estilo. Al trabajar con margenes personalizados o diseños de página específicos, los saltos de página garantizan que el contenido aparezca exactamente donde se desea.

¿Por qué page-break-after funciona mejor que otros métodos?

En este ejemplo, tengo los siguientes table y img en mi HTML, y los quiero en dos páginas separadas añadiendo un salto de página después del table. La propiedad page-break-after proporciona resultados más consistentes a través de diferentes motores de renderizado en comparación con alternativas como page-break-before o espaciado manual. Al crear nuevos PDF con diseños complejos, este enfoque garantiza una paginación predecible.

¿Qué elementos debo usar para los saltos de página?

Los saltos de página funcionan efectivamente con elementos a nivel de bloque como div, section y article. Aunque se pueden aplicar estilos de salto de página a varios elementos HTML, envolver contenido en un div dedicado ofrece los resultados más confiables. Esto es especialmente importante cuando se trabaja con encabezados y pies de página que deben aparecer de forma coherente en todas las páginas.

Tabla

<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>

HTML

Imagen

<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" />

HTML

¿Cómo implementar saltos de página en 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")

$vbLabelText $csharpLabel

El código anterior genera un PDF con 2 páginas: el table en la primera página y el img en la segunda:

¿Cómo evitar saltos de página en las imágenes?

Para evitar un salto de página dentro de una imagen o table, usa el atributo CSS avoid aplicado a un elemento div envolvente. Esta técnica es esencial para mantener la integridad visual al depurar HTML con Chrome para asegurarse de que sus PDF se muestran exactamente como se pretendía.

<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>

HTML

¿Por qué debería envolver imágenes en elementos DIV?

Envolver imágenes en elementos div proporciona un mejor control sobre el comportamiento de los saltos de página. La propiedad page-break-inside funciona más confiablemente en elementos a nivel de bloque. Las imágenes son elementos en línea por defecto, por lo que envolverlas garantiza que el estilo se aplique correctamente. Este enfoque es especialmente útil cuando se trabaja con diseños responsive CSS que necesitan mantener su estructura en formato PDF.

¿Cuáles son los problemas comunes con los saltos de página de imágenes?

Entre los problemas más comunes se encuentran la división de imágenes en páginas, la representación parcial en los límites de las páginas y la pérdida de pies de foto o texto asociado. Estos problemas suelen producirse cuando las imágenes están cerca de la parte inferior de una página. Usar el envoltorio page-break-inside: avoid previene estos problemas asegurando que toda la imagen y su contenedor se muevan a la siguiente página como una unidad.

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

$vbLabelText $csharpLabel

¿Cómo evitar los saltos de página en las tablas?

Como se mostró anteriormente, los saltos de página dentro de tablas pueden evitarse utilizando el CSS avoid. Esto es mejor aplicado a un div envolvente que a la tabla misma para asegurar que el estilo se aplique a un nodo HTML a nivel de bloque. A la hora de crear tutoriales completos HTML a PDF, el formato adecuado de las tablas es crucial para la legibilidad.

¿Cuándo debo usar thead para los encabezados de tabla?

Para duplicar encabezados y pies de tabla en cada página de una tabla HTML grande que abarca múltiples páginas PDF, utiliza 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>

HTML

El elemento <thead> asegura que los encabezados de tabla se repitan en cada página cuando una tabla abarca múltiples páginas. Esto resulta especialmente útil para informes financieros, listados de datos y cualquier documento en el que se necesite contexto en cada página. Para la configuración inicial y la descripción general de la instalación, IronPDF maneja estos estándares HTML automáticamente.

¿Por qué es importante incluir tablas en DIV?

Envolver tablas en elementos div con controles de salto de página proporciona varios beneficios:

Asegura que toda la tabla se mueva como una unidad a la página siguiente si es necesario
Evita que las cabeceras se separen de las filas de datos
Permite un control adicional del estilo y el espaciado
Facilita la adición de pies de foto o descripciones que permanezcan en la tabla

¿Qué ajustes avanzados de CSS3 controlan los saltos de página?

Para obtener un mayor control, utiliza 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>

HTML

¿Qué propiedades CSS funcionan mejor para diseños complejos?

Para diseños complejos, combine varias propiedades CSS:

page-break-inside - Previene que los elementos se dividan
page-break-after - Fuerza un salto después de un elemento
page-break-before - Fuerza un salto antes de un elemento
orphans y widows - Controla el mínimo de líneas en los saltos de página
break-inside, break-after, break-before - Alternativas modernas en CSS3

Estas propiedades se combinan para crear PDF de aspecto profesional con una fluidez y legibilidad adecuadas.

¿Cómo solucionar problemas de saltos de página?

Cuando los saltos de página no funcionan como se espera:

Compruebe que la estructura HTML es válida
Comprobar que los estilos se aplican a los elementos a nivel de bloque
Pruebe primero con ejemplos sencillos y luego añada complejidad
Utilizar las herramientas de desarrollador del navegador para inspeccionar los estilos calculados
Considere la posibilidad de utilizar las opciones de renderizado de IronPDF para obtener un control adicional

Recuerde que los distintos renderizadores de PDF pueden gestionar los saltos de página de forma ligeramente diferente, por lo que es importante realizar pruebas con su caso de uso específico para lograr resultados coherentes en todos los escenarios.

Preguntas Frecuentes

¿Cómo añado un salto de página al convertir HTML a PDF en C#?

Para añadir un salto de página al utilizar IronPDF, inserte `

` en el código HTML donde desee que se produzca el salto. ChromePdfRenderer de IronPDF reconocerá esta propiedad CSS y creará una nueva página en ese punto del documento PDF.

¿Qué propiedad CSS es más fiable para controlar los saltos de página en la conversión de PDF?

La propiedad CSS `page-break-after: always;` es el método más fiable cuando se utiliza IronPDF. Esta propiedad proporciona resultados coherentes en diferentes motores de renderizado y garantiza una paginación predecible en los documentos PDF convertidos.

¿Cómo puedo evitar los saltos de página dentro de tablas o imágenes?

Para evitar saltos de página no deseados dentro de tablas o imágenes, utilice la propiedad CSS `page-break-inside: avoid;`. Al convertir HTML a PDF con IronPDF, este estilo garantiza que las tablas y las imágenes permanezcan intactas en una sola página en lugar de dividirse en varias.

¿Qué elementos HTML funcionan mejor con los estilos de salto de página?

Los saltos de página funcionan mejor con elementos a nivel de bloque como `

`, `` y `

`. IronPDF recomienda envolver el contenido en un elemento `

` dedicado con el estilo de salto de página para obtener los resultados más fiables al convertir HTML a PDF.

¿Puedo controlar los saltos de página a nivel de CSS en lugar de los estilos en línea?

Sí, puede establecer estilos de salto de página a nivel de CSS en lugar de utilizar estilos en línea. El motor de renderizado de IronPDF es totalmente compatible con hojas de estilo CSS, lo que le permite definir reglas de salto de página en su archivo CSS y mantener un código HTML más limpio y fácil de mantener.

¿Por qué debería utilizar page-break-after en lugar de page-break-before?

La propiedad `page-break-after` proporciona resultados más coherentes en diferentes motores de renderizado en comparación con `page-break-before`. Cuando se utiliza IronPDF para crear PDF con diseños complejos, page-break-after garantiza un comportamiento de paginación más predecible y fiable.

Curtis Chau

Chatea con el equipo de ingeniería ahora

Escritor Técnico

Curtis Chau tiene una licenciatura en Ciencias de la Computación (Carleton University) y se especializa en el desarrollo front-end con experiencia en Node.js, TypeScript, JavaScript y React. Apasionado por crear interfaces de usuario intuitivas y estéticamente agradables, disfruta trabajando con frameworks modernos y creando manuales bien ...

¿Listo para empezar?

Nuget Descargas 19,014,616 | Versión: 2026.5 just released