Gestión de encabezados, pies de página y saltos de página en PDF

Actualizado:septiembre 10, 2025

Translated

View the article in English

Los saltos de página pueden ser confusos.

La regla CSS page-break-after siempre funcionará si se aplica correctamente. Sin embargo, esta regla no funcionará si su hoja de estilo cambia un div de display:block. Asegúrese de que la regla page-break-after se aplique a un elemento de nivel de bloque, preferiblemente un div que sea un hijo directo de la etiqueta body.

El siguiente ejemplo de HTML demuestra:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Print Page Breaks with Header and Footer</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        header, footer {
            position: fixed;
            width: 100%;
            text-align: center;
            background-color: #f1f1f1;
            padding: 10px 0;
        }
        header {
            top: 0;
        }
        footer {
            bottom: 0;
        }
        .content {
            margin: 150px 20px; /* Adjust margins to prevent content overlap with header and footer */
        }
        .page-break {
            page-break-after: always;
            display: block; /* Ensure it remains a block-level element */
        }
    </style>
</head>
<body>
    <header>
        <h1>Document Title</h1>
        <p>Header Content</p>
    </header>
    <footer>
        <p>Footer Content</p>
    </footer>
    <div class="content">
        <div class="page-break">
            <h2>Section 1</h2>
            <p>This is the first section. After this section, there will be a page break.</p>
        </div>
        <div class="page-break">
            <h2>Section 2</h2>
            <p>This is the second section. The header and footer continue to be displayed, and the content starts on a new page.</p>
        </div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Print Page Breaks with Header and Footer</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        header, footer {
            position: fixed;
            width: 100%;
            text-align: center;
            background-color: #f1f1f1;
            padding: 10px 0;
        }
        header {
            top: 0;
        }
        footer {
            bottom: 0;
        }
        .content {
            margin: 150px 20px; /* Adjust margins to prevent content overlap with header and footer */
        }
        .page-break {
            page-break-after: always;
            display: block; /* Ensure it remains a block-level element */
        }
    </style>
</head>
<body>
    <header>
        <h1>Document Title</h1>
        <p>Header Content</p>
    </header>
    <footer>
        <p>Footer Content</p>
    </footer>
    <div class="content">
        <div class="page-break">
            <h2>Section 1</h2>
            <p>This is the first section. After this section, there will be a page break.</p>
        </div>
        <div class="page-break">
            <h2>Section 2</h2>
            <p>This is the second section. The header and footer continue to be displayed, and the content starts on a new page.</p>
        </div>
    </div>
</body>
</html>

HTML

Si necesita repetir encabezados y pies de tabla en cada página del PDF, consulte este artículo: Añadir o Evitar Saltos de Página en HTML PDFs

Si los pasos anteriores no resuelven su problema, por favor intente lo siguiente:

1. Simplificar el tema

Si su contenido varía en longitud, pruebe el contenido de longitudes variables, para asegurarse de que está utilizando el HTML/CSS correcto. Esta herramienta se puede usar para ayudar.

2. Valida tu HTML y CSS

Validador de CSS se puede usar para verificar el estilo CSS utilizado.

Validador de HTML se puede usar para ayudarle a validar su entrada HTML.

Además, puede pedir a su diseñador web que revise su HTML, mientras realiza un seguimiento de los cambios.

Por otro lado, el posicionamiento de la sección de divulgación está afectado por muchos factores, incluida la estructura de la tabla, tfoot, y muchos otros. Por lo tanto, revisar su cadena HTML y estructura seguramente ayudará.

3. Comprueba el resultado en la vista previa de impresión de Chrome

IronPDF generará un PDF idéntico al navegador web Chrome de escritorio, gracias al uso del motor de renderizado de PDF de Chrome utilizado en IronPDF.

Por lo tanto, puede verificar la apariencia de su HTML a través de la Vista Previa de Impresión de Chrome y ajustar el HTML en consecuencia. Esto puede requerir prueba y error, pero es la forma más fácil de depurar su HTML.

Aprenda más sobre cómo depurar su HTML a través de la Vista Previa de Impresión de Chrome: Formato HTML Perfecto en Pixeles

Consulte este artículo para obtener más información sobre el Motor de Renderizado de PDF de Chrome: ¿Qué es el Renderizador de Chrome de IronPDF?

4. Utilizar las herramientas para desarrolladores de Chrome

Alternativamente, puede usar Inspeccionar en las herramientas de desarrollo de Chrome para buscar CSS final calculado en los elementos. Esto dará más detalle sobre cada elemento HTML presente en la cadena.

5. Renderizar el HTML usando IronPDF

Envíe su cadena HTML finalizada o archivo HTML al Renderizador de Chrome de IronPDF y use el método RenderHtmlAsPdf() o RenderHtmlFileAsPdf() para crear su documento PDF.

Es posible que necesite especificar algunas opciones de renderizado al renderizador para ajustar su PDF de salida así como la operación de renderizado. Consulte este artículo para obtener más información.

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,012,929 | Versión: 2025.12 recién lanzado

Ver Licencias