1. IronPDF
  2. Guides pratiques
  3. Sauts de page
Comment gérer les sauts de page HTML en PDF en utilisant C#

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

Curtis Chau
Curtis Chau
Mis à jour:
This article was translated from English: Does it need improvement?
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 de page avec page-break-inside : avoid; lors de la conversion de HTML en PDF à l'aide d'IronPDF en C#.

<TODO : Ajouter une image ici -->

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.

comme-titre:2(Démarrage rapide : Implémentation de sauts de page dans la conversion HTML en 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 résultant.

Nuget IconCommencez dès maintenant à créer des PDF avec NuGet :

  1. Installez IronPDF avec le gestionnaire de packages NuGet

    PM > Install-Package IronPdf

  2. 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");

  3. Déployez pour tester sur votre environnement de production.

    Commencez à utiliser IronPDF dans votre projet dès aujourd'hui grâce à un essai gratuit.
    arrow pointer

Flux de travail minimal (5 étapes)

IronPDF promotional guide showing 4 steps for HTML PDF page breaks with NuGet install command
  1. Téléchargez la bibliothèque C# pour utiliser les sauts de page dans les PDF
  2. Appliquez des sauts de page à une chaîne HTML et convertissez-la en PDF
  3. Définir avoid sur l'attribut page-break-inside pour éviter les sauts de page dans les images
  4. Faites de même pour les tableaux afin d'éviter les sauts de page dans les tableaux
  5. Définissez le style au niveau CSS


Comment ajouter un saut de page de HTML à PDF?

<TODO : Ajouter une image ici -->

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 le tableau et l'image suivants dans mon HTML, et je veux qu'ils soient sur deux pages séparées en ajoutant un saut de page après le tableau. La propriété page-break-after fournit des résultats plus cohérents sur différents moteurs de rendu par rapport à des alternatives comme 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 qu'il soit possible d'appliquer des styles de saut de page à divers éléments HTML, le fait d'envelopper le contenu dans un <div> dédié donne 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");
$vbLabelText   $csharpLabel

Le code ci-dessus génère un PDF de 2 pages : le tableau sur la première page et l'image sur la seconde :

Comment éviter les sauts de page dans les images?

Pour éviter un saut de page à l'intérieur d'une image ou d'un tableau, utilisez l'attribut CSS page-break-inside appliqué à un élément DIV enveloppant. 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?

L'intégration d'images dans des éléments DIV permet de mieux contrôler le comportement des sauts de page. La propriété page-break-inside : avoid 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");
$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 page-break-inside : avoid. Mieux vaut l'appliquer à un DIV englobant plutôt qu'au tableau lui-même pour s'assurer que le style est 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 sur chaque page d'un grand tableau HTML couvrant 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 ?

L'intégration de tableaux dans des éléments DIV avec des contrôles de saut de page présente 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 un meilleur 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 : avoid - Empêche les éléments de se séparer
  • page-break-after : always - Force un saut de page après un élément
  • page-break-before : always - Force un break avant un élément
  • orphans et widows - Contrôle des lignes minimales 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 :

  1. Vérifiez que votre structure HTML est valide
  2. Vérifier que les styles sont appliqués aux éléments au niveau du bloc
  3. Testez d'abord avec des exemples simples, puis ajoutez de la complexité
  4. Utiliser les outils de développement du navigateur pour inspecter les styles calculés
  5. 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
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 ...

Lire la suite
Prêt à commencer?
Nuget Téléchargements 17,012,929 | Version : 2025.12 vient de sortir

Obtenez votre GRATUIT

Clé d'essai de 30 jours instantanément.

Clé d'essai de 15 jours instantanément.

Greencheck In Yellowcircle related to Ajouter ou éviter les sauts de page dans les PDF HTML avec C#35;
Le formulaire d'essai a été soumis
avec succès.

Votre clé d'essai devrait être dans l'email.
Si ce n'est pas le cas, veuillez contacter
support@ironsoftware.com

bullet_checkedAucune carte de crédit ou création de compte requise
bullet_testTester en production
sans filigranes
bullet_calendarProduit entièrement fonctionnel
pendant 30 jours
bullet_supportSupport technique 24/5
pendant l'essai
Essai de 30 jours → Produit complet. Pas de limites. Pas de carte. Essai gratuit