Ajouter ou éviter les sauts de page dans les PDF HTML avec C

Mis à jour:14 décembre 2025

Translated

View the article in English

Contrôlez les sauts de page dans les documents PDF en ajoutant page-break-after: always; aux éléments HTML ou en empêchant les sauts avec page-break-inside: avoid; lors de la conversion de HTML en PDF à l'aide d'IronPDF en C#.

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 tandis que les PDF sont paginés et peuvent être imprimés. Lors de la conversion de chaînes HTML en PDF, les développeurs ont souvent besoin d'un contrôle précis de l'endroit où les pages s'interrompent pour garantir des documents d'aspect professionnel.

Démarrage rapide : Implémentation des sauts de page lors de la conversion HTML vers PDF

Convertissez HTML en PDF avec des sauts de page à l'aide d'IronPDF. Cet exemple montre comment insérer un saut de page après un contenu HTML spécifique pour assurer une pagination correcte. En ajoutant le style page-break-after: always;, les développeurs contrôlent l'emplacement des sauts de page, ce qui améliore la lisibilité et l'organisation du document PDF obtenu. <div> <section> <article> <div> page-break-inside DIV page-break-inside: avoid page-break-inside: avoid DIV <thead> page-break-inside: avoid page-break-after: always page-break-before: always orphans widows break-inside break-after break-before

Installez IronPDF avec le Gestionnaire de Packages NuGet
PM > Install-Package IronPdf

Copiez et exécutez cet extrait de code.

new IronPdf.ChromePdfRenderer()
  .RenderHtmlAsPdf("<html><body><h1>Hello World!</h1><div style='page-break-after: always;'></div></body></html>")
  .SaveAs("pageWithBreaks.pdf");

Déployez pour tester sur votre environnement de production.

Commencez à utiliser IronPDF dans votre projet dès aujourd'hui avec un essai gratuit

Flux de travail minimal (5 étapes)

Téléchargez la bibliothèque C# pour utiliser les sauts de page dans les PDF
Appliquez des sauts de page à une chaîne HTML et convertissez-la en PDF
Définissez avoid sur l'attribut page-break-inside pour éviter les ruptures de page dans les images
Faites de même pour les tableaux afin d'éviter les sauts de page dans les tableaux
Définissez le style au niveau CSS

Comment ajouter un saut de page de HTML à PDF?

Pour créer un saut de page en HTML, utilisez ceci dans votre code HTML :

<div style="page-break-after: always;"></div>

<div style="page-break-after: always;"></div>

HTML

La propriété CSS page-break-after est la méthode la plus fiable pour contrôler la pagination lors de la conversion de HTML en PDF. Cette propriété indique au moteur de rendu PDF d'insérer un saut de page immédiatement après l'élément contenant ce style. Lorsque vous travaillez avec des marges personnalisées ou des mises en page spécifiques, les sauts de page garantissent que le contenu apparaît exactement à l'endroit prévu.

Pourquoi page-break-after fonctionne mieux que les autres méthodes?

Dans cet exemple, j'ai les éléments table et img dans mon code HTML, et je souhaite les répartir sur deux pages distinctes en ajoutant un saut de page après table. La propriété page-break-after offre des résultats plus cohérents entre les différents moteurs de rendu par rapport à des alternatives telles que page-break-before ou l'espacement manuel. Lors de la création de nouveaux PDF avec des mises en page complexes, cette approche garantit une pagination prévisible.

Quels éléments dois-je utiliser pour les sauts de page?

Les sauts de page fonctionnent efficacement avec des éléments de niveau bloc tels que div, section et article. Bien que vous puissiez appliquer des styles de saut de page à divers éléments HTML, l'encadrement du contenu dans un balisage dédié div offre les résultats les plus fiables. Cela est particulièrement important lorsque l'on travaille avec des en-têtes et pieds de page qui doivent apparaître de manière cohérente d'une page à l'autre.

Tableau

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

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

HTML

Image

<img src="/static-assets/pdf/how-to/html-to-pdf-page-breaks/ironpdf-logo-text-dotnet.svg" style="border:5px solid #000000; padding:3px; margin:5px" />

<img src="/static-assets/pdf/how-to/html-to-pdf-page-breaks/ironpdf-logo-text-dotnet.svg" style="border:5px solid #000000; padding:3px; margin:5px" />

HTML

Comment mettre en place des sauts de page dans le code C#35?

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

$vbLabelText $csharpLabel

Le code ci-dessus génère un PDF de 2 pages : table sur la première page et img sur la deuxième :

Comment éviter les sauts de page dans les images?

Pour éviter un saut de page au sein d'une image ou de table, utilisez l'attribut CSS avoid appliqué à un élément d'encadrement div. Cette technique est essentielle pour maintenir l'intégrité visuelle lorsque débogage HTML avec Chrome afin de garantir que vos PDF s'affichent exactement comme prévu.

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

HTML

Pourquoi devrais-je envelopper les images dans des éléments DIV?

Envelopper les images dans des éléments div permet de mieux contrôler le comportement des sauts de page. La propriété page-break-inside fonctionne de manière plus fiable sur les éléments de niveau bloc. Les images étant par défaut des éléments en ligne, le fait de les envelopper permet de s'assurer que le style est correctement appliqué. Cette approche est particulièrement utile lorsqu'on travaille avec des mises en page responsive CSS qui doivent conserver leur structure au format PDF.

Quels sont les problèmes courants liés aux sauts de page ?

Les problèmes les plus fréquents sont le fractionnement des images sur plusieurs pages, le rendu partiel en bordure de page et la perte des légendes ou du texte associé. Ces problèmes surviennent souvent lorsque les images se trouvent en bas de page. L'utilisation du wrapper page-break-inside: avoid permet d'éviter ces problèmes en garantissant que l'image entière et son conteneur passent à la page suivante en tant qu'unité.

using IronPdf;

// Example showing how to prevent image breaks in a more complex layout
const string htmlWithProtectedImage = @"
<html>
<head>
    <style>
        .no-break { page-break-inside: avoid; }
        .image-container { 
            border: 2px solid #333; 
            padding: 10px; 
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <h1>Product Gallery</h1>
    <p>Our featured products are displayed below:</p>

    <div class='no-break image-container'>
        <img src='product1.jpg' alt='Product 1' />
        <p>Product 1 Description</p>
    </div>

    <div class='no-break image-container'>
        <img src='product2.jpg' alt='Product 2' />
        <p>Product 2 Description</p>
    </div>
</body>
</html>";

var renderer = new ChromePdfRenderer();
var pdf = renderer.RenderHtmlAsPdf(htmlWithProtectedImage);
pdf.SaveAs("ProductGallery.pdf");

using IronPdf;

// Example showing how to prevent image breaks in a more complex layout
const string htmlWithProtectedImage = @"
<html>
<head>
    <style>
        .no-break { page-break-inside: avoid; }
        .image-container { 
            border: 2px solid #333; 
            padding: 10px; 
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <h1>Product Gallery</h1>
    <p>Our featured products are displayed below:</p>

    <div class='no-break image-container'>
        <img src='product1.jpg' alt='Product 1' />
        <p>Product 1 Description</p>
    </div>

    <div class='no-break image-container'>
        <img src='product2.jpg' alt='Product 2' />
        <p>Product 2 Description</p>
    </div>
</body>
</html>";

var renderer = new ChromePdfRenderer();
var pdf = renderer.RenderHtmlAsPdf(htmlWithProtectedImage);
pdf.SaveAs("ProductGallery.pdf");

Imports IronPdf

' Example showing how to prevent image breaks in a more complex layout
Const htmlWithProtectedImage As String = "
<html>
<head>
    <style>
        .no-break { page-break-inside: avoid; }
        .image-container { 
            border: 2px solid #333; 
            padding: 10px; 
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <h1>Product Gallery</h1>
    <p>Our featured products are displayed below:</p>

    <div class='no-break image-container'>
        <img src='product1.jpg' alt='Product 1' />
        <p>Product 1 Description</p>
    </div>

    <div class='no-break image-container'>
        <img src='product2.jpg' alt='Product 2' />
        <p>Product 2 Description</p>
    </div>
</body>
</html>"

Dim renderer As New ChromePdfRenderer()
Dim pdf = renderer.RenderHtmlAsPdf(htmlWithProtectedImage)
pdf.SaveAs("ProductGallery.pdf")

$vbLabelText $csharpLabel

Comment éviter les sauts de page dans les tableaux ?

Comme indiqué ci-dessus, les sauts de page dans les tableaux peuvent être évités à l'aide du CSS avoid. Il est préférable d'appliquer cela à un élément d'encadrement div plutôt qu'au tableau lui-même afin de garantir que le style soit appliqué à un nœud HTML de niveau bloc. Lors de la création de tutoriels complets HTML vers PDF, une mise en forme correcte des tableaux est cruciale pour la lisibilité.

Quand dois-je utiliser thead pour les en-têtes de tableau ?

Pour dupliquer les en-têtes et les pieds de page d'un grand tableau HTML s'étendant sur plusieurs pages PDF, utilisez 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>

HTML

L'élément <thead> garantit que les en-têtes de tableau se répètent sur chaque page lorsqu'un tableau s'étend sur plusieurs pages. Cette traduction est particulièrement utile pour les rapports financiers, les listes de données et tout document où le contexte est nécessaire à chaque page. Pour la configuration initiale et l'aperçu de l'installation, IronPDF gère automatiquement ces normes HTML.

Pourquoi l'intégration de tableaux dans des DIV est-elle importante ?

Envelopper les tableaux dans des éléments div avec des contrôles de saut de page offre plusieurs avantages :

Veiller à ce que l'ensemble du tableau passe à la page suivante si nécessaire
Empêche les en-têtes d'être séparés des lignes de données
Permet un contrôle supplémentaire du style et de l'espacement
Facilite l'ajout de légendes ou de descriptions qui restent dans le tableau

Quels sont les paramètres CSS3 avancés qui contrôlent les sauts de page ?

Pour plus de contrôle, utilisez 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>

HTML

Quelles sont les propriétés CSS les plus efficaces pour les mises en page complexes ?

Pour des mises en page complexes, combinez plusieurs propriétés CSS :

page-break-inside - Empêche la division des éléments
page-break-after - Force un saut de ligne après un élément
page-break-before - Force un saut de ligne avant un élément
orphans et widows - Contrôle le nombre minimum de lignes aux sauts de page
break-inside, break-after, break-before - Alternatives CSS3 modernes

Ces propriétés s'associent pour créer des PDF d'aspect professionnel, avec un flux et une lisibilité appropriés.

Comment résoudre les problèmes de saut de page?

Lorsque les sauts de page ne fonctionnent pas comme prévu :

Vérifiez que votre structure HTML est valide
Vérifier que les styles sont appliqués aux éléments au niveau du bloc
Testez d'abord avec des exemples simples, puis ajoutez de la complexité
Utiliser les outils de développement du navigateur pour inspecter les styles calculés
Envisagez d'utiliser les options de rendu d'IronPDF pour bénéficier d'un contrôle supplémentaire

N'oubliez pas que les différents moteurs de rendu PDF peuvent traiter les sauts de page de manière légèrement différente. Il est donc important de tester votre cas d'utilisation spécifique pour obtenir des résultats cohérents dans tous les scénarios.

Questions Fréquemment Posées

Comment ajouter un saut de page lors de la conversion de HTML en PDF en C# ?

Pour ajouter un saut de page lorsque vous utilisez IronPDF, insérez `

` dans votre code HTML à l'endroit où vous souhaitez que le saut de page se produise. Le ChromePdfRenderer d'IronPDF reconnaîtra cette propriété CSS et créera une nouvelle page à cet endroit du document PDF.

Quelle est la propriété CSS la plus fiable pour contrôler les sauts de page dans la conversion PDF ?

La propriété CSS `page-break-after : always;` est la méthode la plus fiable lors de l'utilisation d'IronPDF. Cette propriété fournit des résultats cohérents sur différents moteurs de rendu et assure une pagination prévisible dans vos documents PDF convertis.

Comment éviter les sauts de page dans les tableaux ou les images ?

Pour éviter les sauts de page indésirables dans les tableaux ou les images, utilisez la propriété CSS `page-break-inside : avoid;`. Lors de la conversion de HTML en PDF avec IronPDF, ce style garantit que vos tableaux et images restent intacts sur une seule page plutôt que d'être répartis sur plusieurs pages.

Quels sont les éléments HTML qui fonctionnent le mieux avec les styles de saut de page ?

Les sauts de page sont plus efficaces avec les éléments de niveau bloc comme `

`, `` et `

`. IronPDF recommande d'envelopper le contenu dans un élément `

` dédié avec le style de saut de page pour obtenir les résultats les plus fiables lors de la conversion de HTML en PDF.

Puis-je contrôler les sauts de page au niveau CSS au lieu des styles en ligne ?

Oui, vous pouvez définir des styles de saut de page au niveau CSS plutôt que d'utiliser des styles en ligne. Le moteur de rendu d'IronPDF prend entièrement en charge les feuilles de style CSS, ce qui vous permet de définir des règles de saut de page dans votre fichier CSS et de conserver un code HTML plus propre et plus facile à maintenir.

Pourquoi devrais-je utiliser page-break-after au lieu de page-break-before ?

La propriété `pagebreak-after` fournit des résultats plus cohérents sur différents moteurs de rendu que la propriété `pagebreak-before`. Lorsqu'on utilise IronPDF pour créer des PDF avec des mises en page complexes, la propriété `page-break-after` assure un comportement de pagination plus prévisible et plus fiable.

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 19,014,616 | Version : 2026.5 just released

Voir Licences

Vous faites encore défiler ?

Vous voulez une preuve rapidement ? PM > Install-Package IronPdf
exécuter un échantillon Regardez votre code HTML se transformer en PDF.

Voir Licences

Commencez GRATUITEMENT

Pas de carte de crédit requise

Testez dans un environnement en direct

Testez en production sans filigranes.
Fonctionne où que vous en ayez besoin.

Produit entièrement fonctionnel

Profitez de 30 jours de produit entièrement fonctionnel.
Configurez-le et faites-le fonctionner en quelques minutes.

Support technique 24/5

Accès complet à notre équipe de support technique durant votre essai produit

Commencez GRATUITEMENT

Le formulaire d'essai a été soumis avec succès.

Réservez une démonstration en direct gratuite

Pas de contact, pas de détails de carte, pas d'engagement Réservez une démo personnelle de 30 minutes.

Voilà ce à quoi vous pouvez vous attendre :

Une démonstration en direct de notre produit et de ses fonctionnalités clés

Obtenez des recommandations de fonctionnalités spécifiques au projet

Nous répondons à toutes vos questions afin de nous assurer que vous disposez de toutes les informations dont vous avez besoin. (Sans aucun engagement)

Réservez une démonstration en direct gratuite

Votre réservation a été effectuée Vérifiez votre e-mail pour la confirmation