1. IronPDF
  2. Guides pratiques
  3. Ajouter une Table des matières
Comment ajouter une table des matières en C# | IronPDF

Comment ajouter une table des matières en C#35;

Curtis Chau
Curtis Chau
Mis à jour:
This article was translated from English: Does it need improvement?
Translated
View the article in English

IronPDF vous permet d'ajouter une table des matières aux documents PDF en C# en définissant la propriété TableOfContents, qui génère automatiquement une navigation par hyperliens à partir des en-têtes HTML (h1-h6) avec des numéros de page facultatifs.

Démarrage rapide : ajouter une table des matières à un PDF en C#

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 ChromePdfRenderer { RenderingOptions = { CreateOutlineMaps = true, OutlineMapsFormat = TableOfContentsTypes.WithPageNumbers, FirstPageNumber = 1 } }
    .RenderHtmlFileAsPdf("myDocument.html")
    .SaveAs("withToc.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)

  1. Télécharger la bibliothèque C# pour l'ajout d'une table des matières
  2. Préparez le HTML à convertir en PDF
  3. Définissez la propriété TableOfContents pour activer la table des matières
  4. Choisir d'afficher ou non les numéros de page
  5. Optimiser l'emplacement de la table des matières


Qu'est-ce qu'une table des matières en PDF?

Une table des matières (TOC) est une feuille de route qui aide les lecteurs à naviguer dans le contenu du document PDF. Il apparaît généralement au début et liste les sections principales ou chapitres du PDF, ainsi que les numéros de page où chaque section commence. Cela permet aux lecteurs de trouver rapidement et d'accéder à des parties spécifiques du document, facilitant ainsi l'accès aux informations dont ils ont besoin.

IronPDF fournit une fonctionnalité pour créer un sommaire avec des hyperliens vers les éléments 'h1', 'h2', 'h3', 'h4', 'h5' et 'h6'. Le style par défaut de ce sommaire n'entrera pas en conflit avec d'autres styles dans le contenu HTML. Lorsque vous créez de nouveaux PDF à l'aide d'IronPDF, la fonction de table des matières analyse automatiquement vos en-têtes HTML et construit une structure de navigation hiérarchique qui reflète l'organisation de votre document.

La table des matières générée comprend des liens cliquables qui permettent aux lecteurs d'accéder directement à n'importe quelle section, ce qui la rend particulièrement utile pour les documents longs, les rapports et la documentation technique. La mise en œuvre de la TOC d'IronPDF préserve la structure sémantique de votre HTML tout en offrant des capacités de navigation professionnelle dans le PDF.

Comment ajouter une table des matières à mon PDF?

Utilisez la propriété TableOfContents pour activer la création d'un sommaire dans le document PDF de sortie. Cette propriété peut être assignée à l'un des trois TableOfContentsTypes, qui sont décrits comme suit :

  • Aucun : Ne pas créer de sommaire
  • Basique : Créer un sommaire sans numéros de page
  • AvecNumérosDePage : Créer un sommaire AVEC numéros de page

Cette fonctionnalité utilise JavaScript pour construire le sommaire; par conséquent, le moteur doit avoir JavaScript activé. Lors de la conversion de fichiers HTML en PDF, le moteur JavaScript d'IronPDF traite vos balises d'en-tête et génère la structure de navigation appropriée. Pour mieux comprendre cette fonctionnalité, téléchargez l'exemple de fichier HTML ci-dessous :

Quel est le code dont j'ai besoin pour générer la table des matières?

:path=/static-assets/pdf/content-code-examples/how-to/table-of-contents.cs
using IronPdf;

// Instantiate Renderer
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Configure render options
renderer.RenderingOptions = new ChromePdfRenderOptions
{
    // Enable table of content feature
    TableOfContents = TableOfContentsTypes.WithPageNumbers,
};

PdfDocument pdf = renderer.RenderHtmlFileAsPdf("tableOfContent.html");

pdf.SaveAs("tableOfContents.pdf");
$vbLabelText   $csharpLabel

Pour des scénarios plus avancés, vous pouvez combiner la table des matières avec d'autres options de rendu pour créer des documents PDF complets :

using IronPdf;

// Create renderer with multiple options
ChromePdfRenderer renderer = new ChromePdfRenderer();
renderer.RenderingOptions = new ChromePdfRenderOptions
{
    // Enable table of contents with page numbers
    TableOfContents = TableOfContentsTypes.WithPageNumbers,

    // Add margins for better formatting
    MarginTop = 40,
    MarginBottom = 40,

    // Enable JavaScript for dynamic content
    EnableJavaScript = true,

    // Set paper orientation
    PaperOrientation = PdfPaperOrientation.Portrait,

    // Add first page number offset
    FirstPageNumber = 1
};

 // Convert HTML with multiple header levels
string htmlContent = @"
<h1>Introduction</h1>
<p>Welcome to our comprehensive guide...</p>

<h2>Chapter 1: Getting Started</h2>
<p>Let's begin with the basics...</p>

<h3>1.1 Prerequisites</h3>
<p>Before we start, ensure you have...</p>

<h2>Chapter 2: Advanced Topics</h2>
<p>Now let's explore more complex features...</p>
";

PdfDocument pdf = renderer.RenderHtmlAsPdf(htmlContent);
pdf.SaveAs("document-with-toc.pdf");
using IronPdf;

// Create renderer with multiple options
ChromePdfRenderer renderer = new ChromePdfRenderer();
renderer.RenderingOptions = new ChromePdfRenderOptions
{
    // Enable table of contents with page numbers
    TableOfContents = TableOfContentsTypes.WithPageNumbers,

    // Add margins for better formatting
    MarginTop = 40,
    MarginBottom = 40,

    // Enable JavaScript for dynamic content
    EnableJavaScript = true,

    // Set paper orientation
    PaperOrientation = PdfPaperOrientation.Portrait,

    // Add first page number offset
    FirstPageNumber = 1
};

 // Convert HTML with multiple header levels
string htmlContent = @"
<h1>Introduction</h1>
<p>Welcome to our comprehensive guide...</p>

<h2>Chapter 1: Getting Started</h2>
<p>Let's begin with the basics...</p>

<h3>1.1 Prerequisites</h3>
<p>Before we start, ensure you have...</p>

<h2>Chapter 2: Advanced Topics</h2>
<p>Now let's explore more complex features...</p>
";

PdfDocument pdf = renderer.RenderHtmlAsPdf(htmlContent);
pdf.SaveAs("document-with-toc.pdf");
$vbLabelText   $csharpLabel

À quoi ressemble le PDF généré?

La table des matières sera créée avec des hyperliens vers chacun des 'h1', 'h2', 'h3', 'h4', 'h5' et 'h6'. La structure hiérarchique de vos en-têtes est préservée, avec des sous-titres correctement indentés sous leurs sections parentes. Vous pouvez également ajouter des numéros de page à votre PDF pour une aide à la navigation supplémentaire à côté de la table des matières.

Veuillez noterUtiliser la méthode Merge sur le document brisera les hyperliens de la table des matières.

Lorsque vous travaillez avec des PDF fusionnés ou fractionnés, générez la table des matières une fois que l'assemblage de tous les documents est terminé afin de garantir l'exactitude des références de page et le fonctionnement des hyperliens.

Où dois-je placer la table des matières dans mon PDF?

  1. Veillez à ce que le document HTML comporte les balises d'en-tête appropriées (h1 à h6).
  2. En option, insérez un div pour l'endroit où vous voulez que la table des matières apparaisse. Si le div ci-dessous n'est pas fourni, IronPDF insérera la table des matières au début.
<div id="ironpdf-toc"></div>
<div id="ironpdf-toc"></div>
HTML
  1. Dans les options de rendu, choisissez de rendre le sommaire avec ou sans numéros de page.

Pour les documents à la mise en page complexe, combinez la table des matières avec les en-têtes et les pieds de page pour créer une structure de document professionnelle. Voici un exemple de structure HTML appropriée pour une génération optimale de la table des matières :

<!DOCTYPE html>
<html>
<head>
    <title>My Document</title>
</head>
<body>
    <!-- Table of Contents placeholder -->
    <div id="ironpdf-toc"></div>

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

    <!-- Main content starts here -->
    <h1>Executive Summary</h1>
    <p>This document provides...</p>

    <h2>Market Analysis</h2>
    <h3>Current Trends</h3>
    <p>The market shows...</p>

    <h3>Future Projections</h3>
    <p>We anticipate...</p>

    <h2>Recommendations</h2>
    <p>Based on our analysis...</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>My Document</title>
</head>
<body>
    <!-- Table of Contents placeholder -->
    <div id="ironpdf-toc"></div>

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

    <!-- Main content starts here -->
    <h1>Executive Summary</h1>
    <p>This document provides...</p>

    <h2>Market Analysis</h2>
    <h3>Current Trends</h3>
    <p>The market shows...</p>

    <h3>Future Projections</h3>
    <p>We anticipate...</p>

    <h2>Recommendations</h2>
    <p>Based on our analysis...</p>
</body>
</html>
HTML

Comment styliser la table des matières?

Le sommaire peut être personnalisé à l'aide de CSS en ciblant les différents sélecteurs CSS qui définissent le style du sommaire. Lorsque gestion des polices dans votre PDF, la table des matières hérite par défaut des paramètres de police de votre document, mais peut être personnalisée indépendamment.

De plus, les modifications de style peuvent être effectuées en utilisant la propriété CustomCssUrl. Commencez par télécharger un fichier CSS contenant le style original de la table des matières ci-dessous.

AvertissementActuellement, il n'est pas recommandé d'écraser les propriétés page-break-before et page-break-after lors du stylisme de la table des matières, car cela perturberait le calcul du nombre de pages. L'implémentation actuelle prévoit que la table des matières se trouve sur des pages séparées du reste du contenu du document.

:path=/static-assets/pdf/content-code-examples/how-to/table-of-contents-overwrite-styling.cs
using IronPdf;
using System.IO;

// Instantiate Renderer
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Configure render options
renderer.RenderingOptions = new ChromePdfRenderOptions
{
    // Enable table of content feature
    TableOfContents = TableOfContentsTypes.WithPageNumbers,
    CustomCssUrl = "./custom.css"
};

// Read HTML text from file
string html = File.ReadAllText("tableOfContent.html");
PdfDocument pdf = renderer.RenderHtmlAsPdf(html);

pdf.SaveAs("tableOfContents.pdf");
$vbLabelText   $csharpLabel

Lorsque vous travaillez avec des formats de papier personnalisés, vous devrez peut-être ajuster le style de la table des matières pour tenir compte des différentes dimensions de page et assurer un flux de texte et une pagination corrects.

Comment styliser différents niveaux d'en-tête ?

Utilisez le sélecteur '#ironpdf-toc ul li.h1' pour appliquer un style différent au titre H1 dans la table des matières.

class="content-img-align-center">

class="center-image-wrapper"> ![Styliser les en-têtes](/static-assets/pdf/how-to/table-of-contents/style-headers.webp) 

 #ironpdf-toc ul li.h1 {
    font-style: italic;
    font-weight: bold;
 }
Table des matières stylisée avec des pointillés reliant les chapitres et sections hiérarchiques aux numéros de page

Comment changer la famille de polices?

Pour ce faire, nous pouvons utiliser une police cursive pour le titre et utiliser l'attribut @font-face pour utiliser la police personnalisée 'Lemon' conçue par Eduardo Tunni. Pour ce faire, utilisez la police cursive pour le titre et utilisez l'attribut @font-face pour utiliser la police personnalisée 'Lemon' conçue par Eduardo Tunni.

 #ironpdf-toc li .title {
    order: 1;
    font-family: cursive;
 }

 @font-face {
    font-family: 'lemon';
    src: url('Lemon-Regular.ttf')
 }

 #ironpdf-toc li .page {
    order: 3;
    font-family: 'lemon', sans-serif;
 }
Table des matières avec chapitres, sections et leçons montrant des leaders en pointillés et des numéros de page alignés à droite

Comment contrôler l'indentation?

L'indentation peut être contrôlée à l'aide du sélecteur :root. Cette valeur détermine le montant de retrait pour chaque niveau de titre (h1, h2, ...) dans la table des matières. Elle peut être augmentée si nécessaire, ou il peut n'y avoir aucun retrait avec une valeur de 0.

:root {
    --indent-length: 25px;
}
Table des matières avec chapitres, sections et leçons indentés de manière personnalisée, avec les numéros de page en pointillés

Comment supprimer ou personnaliser les lignes de points?

Pour supprimer les lignes pointillées entre le titre de l'en-tête et le numéro de page, modifiez l'image de fond du sélecteur ::after. Changez-le en "transparent 1px" pour supprimer les points. Il est important de spécifier également d'autres attributs car, dans ce sélecteur, le nouveau style remplacera complètement l'ancien style plutôt que de simplement s'y ajouter.

class="content-img-align-center">

class="center-image-wrapper"> ![Supprimer les points](/static-assets/pdf/how-to/table-of-contents/dot-line.webp) 

 #ironpdf-toc li::after {
    background-image: radial-gradient(circle, transparent 1px, transparent 1.5px);
    background-position: bottom;
    background-size: 1ex 4.5px;
    background-repeat: space no-repeat;
    content: "";
    flex-grow: 1;
    height: 1em;
    order: 2;
 }
Table des matières avec chapitres, sections et leçons montrant une indentation hiérarchique et des numéros de page alignés à droite

Pour des options de style plus avancées, créez des lignes d'attache personnalisées à l'aide de différents motifs :

/* Dashed line leader */
#ironpdf-toc li::after {
    background-image: linear-gradient(to right, currentcolor 50%, transparent 50%);
    background-size: 8px 1px;
    background-repeat: repeat-x;
    background-position: bottom;
}

/* Solid line leader */
#ironpdf-toc li::after {
    border-bottom: 1px solid currentcolor;
    background: none;
}

Prêt à voir ce que vous pouvez faire d'autre? Consultez notre page de tutoriels ici : Convertir les PDFs

Questions Fréquemment Posées

Comment ajouter une table des matières à mon document PDF ?

Vous pouvez ajouter une table des matières à votre PDF à l'aide d'IronPDF en définissant la propriété TableOfContents sur le ChromePdfRenderer. Il suffit de définir RenderingOptions.TableOfContents sur TableOfContentsTypes.Basic pour une table des matières sans numéros de page, ou TableOfContentsTypes.WithPageNumbers pour inclure des numéros de page. IronPDF génère automatiquement la table des matières à partir de vos en-têtes HTML (balises h1-h6).

Quels sont les éléments HTML utilisés pour générer la table des matières ?

IronPDF crée automatiquement la table des matières en analysant et en utilisant les éléments d'en-tête h1, h2, h3, h4, h5 et h6 de votre HTML. Ces en-têtes forment une structure de navigation hiérarchique qui reflète l'organisation de votre document, chaque en-tête devenant un hyperlien cliquable dans la table des matières du PDF généré.

Puis-je inclure des numéros de page dans la table des matières ?

Oui, IronPDF propose deux options de table des matières : TableOfContentsTypes.Basic crée une table des matières sans numéros de page, tandis que TableOfContentsTypes.WithPageNumbers inclut des numéros de page pour chaque section. Vous pouvez choisir l'option qui convient le mieux aux besoins de votre document lorsque vous définissez les RenderingOptions.

La fonction de table des matières nécessite-t-elle JavaScript ?

Oui, IronPDF utilise JavaScript pour construire la table des matières, le moteur de rendu doit donc avoir JavaScript activé. Cette fonction est généralement activée par défaut, mais si vous avez désactivé JavaScript dans vos options de rendu, vous devrez l'activer pour que la fonction de table des matières fonctionne correctement.

Comment configurer la table des matières avec les numéros de page en une seule ligne de code ?

Vous pouvez générer un PDF avec une table des matières comprenant des numéros de page en utilisant cette simple ligne : new ChromePdfRenderer { RenderingOptions = { TableOfContents = TableOfContentsTypes.WithPageNumbers, FirstPageNumber = 1 } }.RenderHtmlFileAsPdf("myDocument.html").SaveAs("withToc.pdf") ; Cela crée une table des matières entièrement fonctionnelle avec une navigation par hyperliens et des numéros de page.

Le style de la table des matières va-t-il entrer en conflit avec mes styles HTML existants ?

Non, le style par défaut de la table des matières d'IronPDF est conçu pour ne pas entrer en conflit avec d'autres styles de votre contenu HTML. La table des matières générée conserve son propre style distinct qui garantit un affichage correct tout en préservant l'apparence du contenu de votre document existant.

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