1. IronPDF
2. Comment faire
3. Sauts de page

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.

Première étape :

Commencer gratuitement

Comment utiliser les sauts de page dans les PDF HTML

1. Télécharger la bibliothèque C# pour utiliser les sauts de page dans les PDF
2. Appliquer des sauts de page à une chaîne HTML et la convertir en PDF
3. Set (jeu de mots) éviter on page-break-inside attribute pour éviter les sauts de page dans les images
4. Faites la même chose pour les tableaux afin d'éviter les sauts de page dans les tableaux
5. 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

Image

: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");

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 enveloppant.

<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. Il est préférable de l'appliquer à un DIV enveloppant plutôt qu'au tableau lui-même afin de s'assurer que le style est appliqué à un nœud html de niveau block.

Pour dupliquer les en-têtes et pieds de page d'un tableau sur chaque page d'un grand tableau HTML couvrant plusieurs pages pdf, vous pouvez utiliser un <thead> groupe dans le 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 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>