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

Controle los saltos de página en documentos PDF agregando page-break-after: always; a los elementos HTML o evitando 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.

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
Establezca **avoid** 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 representar HTML en 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 la siguiente tabla e imagen en mi HTML, y las quiero en dos páginas separadas añadiendo un salto de página después de la tabla. La propiedad page-break-after proporciona resultados más consistentes en diferentes motores de renderizado en comparación con alternativas como page-break-before o el 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 eficazmente con elementos de nivel de bloque como <div>, <section> y <article>. Si bien puedes aplicar estilos de salto de página a varios elementos HTML, envolver el contenido en un <div> dedicado proporciona 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");

$vbLabelText $csharpLabel

El código anterior genera un PDF con 2 páginas: la tabla en la primera página y la imagen 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 tabla, utilice el atributo CSS page-break-inside aplicado a un elemento envolvente DIV. 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 permite controlar mejor el comportamiento de los saltos de página. La propiedad page-break-inside: avoid funciona de manera más confiable en elementos de 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. El uso del contenedor page-break-inside: avoid evita estos problemas al garantizar que toda la imagen y su contenedor se muevan a la página siguiente 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");

$vbLabelText $csharpLabel

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

Como se muestra arriba, los saltos de página dentro de las tablas se pueden evitar utilizando el CSS page-break-inside: avoid. Esto se aplica mejor a un envoltorio DIV que a la tabla misma para garantizar 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 página de tabla en todas las páginas de una tabla HTML grande que abarca varias páginas PDF, utilice 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> garantiza que los encabezados de tabla se repitan en cada página cuando una tabla abarca varias 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 ofrece varias ventajas:

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 brindar mayor control, utilice 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>

HTML

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

Para diseños complejos, combine varias propiedades CSS:

page-break-inside: avoid - Evita que los elementos se dividan
page-break-after: always - Fuerza un salto después de un elemento
page-break-before: always - 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 a 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 17,803,474 | Versión: 2026.3 recién lanzado