How to Add Table of Contents

Exemple d'ajout de sommaire

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é. Pour mieux comprendre cette fonctionnalité, vous pouvez télécharger le fichier HTML exemple ci-dessous :

• Download the sample HTML file

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

Imports IronPdf

' Instantiate Renderer
Private renderer As New ChromePdfRenderer()

' Configure render options
renderer.RenderingOptions = New ChromePdfRenderOptions With {.TableOfContents = TableOfContentsTypes.WithPageNumbers}

Dim pdf As PdfDocument = renderer.RenderHtmlFileAsPdf("tableOfContent.html")

pdf.SaveAs("tableOfContents.pdf")

Placement du sommaire sur le PDF

1. Assurez-vous que le document HTML possède les balises d'en-tête appropriées (h1 jusqu'à h6).
2. Optionnellement insérez un div à l'endroit où vous souhaitez que le sommaire apparaisse. Si le div ci-dessous n'est pas fourni, IronPDF insérera le sommaire au début.

<div id="ironpdf-toc"></div>

<div id="ironpdf-toc"></div>

3. Dans les options de rendu, choisissez de rendre le sommaire avec ou sans numéros de page.

Personnalisation du sommaire

Le sommaire peut être personnalisé à l'aide de CSS en ciblant les différents sélecteurs CSS qui définissent le style du sommaire.

De plus, les modifications de style peuvent être effectuées en utilisant la propriété CustomCssUrl. Commençons par télécharger un fichier CSS contenant le style original du sommaire ci-dessous.

• Download the custom CSS file

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

Imports IronPdf
Imports System.IO

' Instantiate Renderer
Private renderer As New ChromePdfRenderer()

' Configure render options
renderer.RenderingOptions = New ChromePdfRenderOptions With {
	.TableOfContents = TableOfContentsTypes.WithPageNumbers,
	.CustomCssUrl = "./custom.css"
}

' Read HTML text from file
Dim html As String = File.ReadAllText("tableOfContent.html")
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(html)

pdf.SaveAs("tableOfContents.pdf")

Utilisez le sélecteur '#ironpdf-toc ul li.h1' pour appliquer un style différent à l'en-tête H1 dans le sommaire.

Remplacez 'h1' par 'h2' jusqu'à 'h6' pour modifier le style de chaque en-tête respectif.

 #ironpdf-toc ul li.h1 {
    font-style: italic;
    font-weight: bold;
 }

Famille de polices

Avec les deux sélecteurs '#ironpdf-toc li .title' et '#ironpdf-toc li .page', il est possible de remplacer la famille de polices du sommaire.

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. - Téléchargez la police Lemon

• Download the Lemon font

 #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;
 }

Indentation

L'indentation peut être contrôlée en utilisant le sélecteur ':root'.

Cette valeur détermine la quantité d'indentation pour chaque niveau d'en-tête (h1, h2, ...) dans le sommaire. Elle peut être augmentée en fonction des besoins, ou il peut n'y avoir aucune indentation avec une valeur de 0.

:root {
    --indent-length: 25px;
}

Ligne pointillée

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.

Dans le style d'origine, le deuxième paramètre est "currentcolor 1px". 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.

 #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;
 }

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