Gestion des en-têtes, pieds de page et sauts de page dans les PDF

Mis à jour:10 septembre 2025

Translated

View the article in English

Les sauts de page peuvent être déroutants.

La règle CSS page-break-after fonctionnera toujours si elle est appliquée correctement. Cependant, cette règle ne fonctionnera pas si votre feuille de style modifie un div à partir de display:block. Assurez-vous que la règle page-break-after est appliquée à un élément de niveau bloc, de préférence un div qui est un enfant direct de la balise body.

L'exemple HTML ci-dessous illustre :

<!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 vous avez besoin de répéter les en-têtes et pieds de table sur chaque page de PDF, consultez cet article : Ajouter ou éviter les sauts de page dans les PDFs HTML

Si les étapes ci-dessus ne résolvent pas votre problème, essayez les suggestions suivantes :

1. Simplifiez le problème

Si votre contenu varie en longueur, testez des contenus de longueurs variables, pour vous assurer que vous utilisez le bon HTML/CSS. Cet outil peut être utilisé pour vous aider.

2. Validez votre HTML et CSS

Le Validateur CSS peut être utilisé pour vérifier le style CSS utilisé.

Le Validateur HTML peut vous aider à valider votre entrée HTML.

De plus, vous pouvez demander à votre designer web de vérifier votre HTML, tout en suivant les modifications.

D'autre part, le positionnement de la section de divulgation est affecté par de nombreux facteurs, notamment la structure du tableau, tfoot, et bien d'autres. Donc, vérifier à nouveau votre chaîne HTML et sa structure vous aidera sûrement.

3. Vérifiez la sortie dans l'aperçu avant impression de Chrome

IronPDF produira un PDF identique au navigateur web Chrome de bureau, grâce à l'utilisation du moteur de rendu PDF Chrome employé dans IronPDF.

Par conséquent, vous pouvez vérifier l'apparence de votre HTML via l'aperçu avant impression de Chrome et ajuster le HTML en conséquence. Cela peut nécessiter des essais et erreurs, mais c'est le moyen le plus simple de déboguer votre HTML.

En savoir plus sur comment déboguer votre HTML via l'aperçu avant impression de Chrome : Formatage HTML à la perfection

Consultez cet article pour plus d'informations sur le moteur de rendu PDF de Chrome : Qu'est-ce que le rendu Chrome d'IronPDF ?

4. Utilisez les outils de développement Chrome

Alternativement, vous pouvez utiliser Inspecter dans les outils de développement de Chrome pour rechercher les CSS finales calculées dans les éléments. Cela donnera plus de détails sur chaque élément HTML présent dans la chaîne.

5. Rendez le HTML en using IronPDF

Envoyez votre chaîne HTML finalisée ou votre fichier HTML à IronPDF Chrome Renderer et utilisez la méthode RenderHtmlAsPdf() ou RenderHtmlFileAsPdf() pour créer votre document PDF.

Vous pourriez avoir besoin de spécifier certaines options de rendu au moteur pour affiner votre PDF de sortie ainsi que l'opération de rendu. Voir cet article pour en savoir plus.

Curtis Chau

Discutez maintenant avec l'équipe d'ingénierie

Rédacteur technique

Curtis Chau détient un baccalauréat en informatique (Université de Carleton) et se spécialise dans le développement front-end avec expertise en Node.js, TypeScript, JavaScript et React. Passionné par la création d'interfaces utilisateur intuitives et esthétiquement plaisantes, Curtis aime travailler avec des frameworks modernes ...

Prêt à commencer?

Nuget Téléchargements 18,560,885 | Version : 2026.4 vient de sortir