Gestion des en-têtes, pieds de page et sauts de page dans les PDF
Les sauts de page peuvent être source de confusion.
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 une div 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 montre
<!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="content">
<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="content">
<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>Si vous avez besoin de répéter les en-têtes de tableau et les pieds de page dans toutes les pages du PDF, consultez cet article :Ajouter ou éviter les sauts de page dans les PDF HTML
Si les étapes ci-dessus ne résolvent pas votre problème, essayez ce qui suit :
1. Simplifier la question
Si votre contenu varie en longueur, testez les contenus de longueurs variables pour vous assurer que vous utilisez le bon langage HTML/CSS. Le présentoutil peut être utilisé pour aider.
2. Validez votre HTML et votre CSS
Validateur CSS peut être utilisé pour vérifier le style CSS utilisé.
Validateur HTML peut être utilisé pour vous aider à valider vos données HTML.
En outre, vous pouvez demander à votre concepteur de sites web de vérifier votre code HTML, tout en suivant les changements.
D'autre part, le positionnement de la section "divulgation" est influencé par de nombreux facteurs, notamment la structure du tableau, le pied de page et bien d'autres. Une double vérification de la chaîne et de la structure de votre HTML sera donc très utile.
3. Vérifier le résultat dans l'aperçu avant impression de Chrome
IronPDF produira un PDF identique au navigateur web Chrome, grâce à l'utilisation du moteur de rendu PDF de Chrome utilisé dans IronPDF.
Par conséquent, vous pouvez vérifier l'apparence de votre HTML via l'aperçu avant impression de Chrome et l'ajuster en conséquence. Cela peut nécessiter des essais et des erreurs, mais c'est le moyen le plus simple de déboguer votre HTML.
En savoir plus sur la façon de déboguer votre HTML via l'aperçu avant impression de Chrome :Un formatage HTML parfait
Consultez cet article pour en savoir plus sur le moteur de rendu PDF de Chrome :Qu'est-ce que le moteur de rendu Chrome d'IronPDF ?
4. Utiliser les outils de développement de Chrome
Vous pouvez également utiliser Inspect dans les outils de développement Chrome pour rechercher les feuilles de style 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. Rendre le HTML à l'aide d'IronPDF
Envoyez votre chaîne HTML finalisée ou votre fichier HTML à IronPDF Chrome Renderer et utilisez RenderHtmlAsPdf() ou RenderHtmlFileAsPdf() pour créer votre document PDF.
Il se peut que vous deviez spécifier certaines options de rendu au moteur de rendu afin d'affiner votre PDF de sortie ainsi que l'opération de rendu. Voir ceciarticle pour en savoir plus.
