Ajouter ou éviter les sauts de page dans les PDF HTML
IronPDF prend en charge les sauts de page dans les documents PDF. Une différence majeure entre les documents PDF et HTML est que les documents HTML ont tendance à défiler alors que les PDF sont multi-pages et peuvent être imprimés.
Commencez avec IronPDF
Commencez à utiliser IronPDF dans votre projet dès aujourd'hui avec un essai gratuit.
Comment utiliser les sauts de page dans les PDF HTML
- Télécharger la bibliothèque C# pour utiliser les sauts de page dans le PDF
- Appliquer des sauts de page à une chaîne HTML et la convertir en PDF
- Définir avoid sur l'attribut page-break-inside pour éviter les sauts de page dans les images
- Faites la même chose pour éviter les sauts de page dans les tableaux
- Définir le style au niveau CSS
Ajouter un saut de page
Pour créer un saut de page en HTML, vous pouvez utiliser ceci dans votre code HTML :
<div style='page-break-after: always;'> </div>
Démonstration de la création d'un saut de page
Dans cet exemple, j'ai le tableau et l'image suivants dans mon HTML et je voudrais qu'ils soient sur deux pages séparées en ajoutant un saut de page après le tableau.
Tableau
| Company | Product |
|---|---|
| Iron Software | IronPDF |
| Iron Software | IronOCR |
Image
:path=/static-assets/pdf/content-code-examples/how-to/html-to-pdf-page-breaks-page-break.csusing 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")Le code ci-dessus générera le PDF ci-dessous qui comporte 2 pages, le tableau sur la première page et l'image sur la seconde :
Éviter les sauts de page dans les images
Pour éviter un saut de page à l'intérieur d'une image ou d'un tableau, vous pouvez utiliser l'attribut CSS page-break-inside appliqué à un élément DIV englobant.
<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>Éviter les sauts de page dans les tableaux
Comme indiqué ci-dessus, les sauts de page dans les tableaux peuvent être évités en utilisant le CSS :
page-break-inside: avoid. Cela est mieux appliqué à un DIV enveloppant qu'à la table elle-même pour s'assurer que le style est appliqué à un nœud HTML de niveau bloc.
Pour dupliquer les en-têtes et pieds de page du tableau sur chaque page d'un grand tableau HTML s'étendant sur plusieurs pages PDF, vous pouvez utiliser un groupe <thead> à l'intérieur du tableau :
<thead>
<tr>
<th>C Sharp</th><th>VB</th>
</tr>
</thead><thead>
<tr>
<th>C Sharp</th><th>VB</th>
</tr>
</thead>Paramètres CSS3 avancés
Pour avoir un meilleur contrôle, vous pouvez utiliser CSS3 en plus de votre groupe 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>
