1. IronPDF
2. Anleitungen
3. Inhaltsverzeichnis hinzufügen

Hinzufügen eines Inhaltsverzeichnisses

von Chaknith Bin

Ein Inhaltsverzeichnis(TOC) ist wie ein Fahrplan, der den Lesern hilft, durch den Inhalt des PDF-Dokuments zu navigieren. Es erscheint normalerweise am Anfang und listet die Hauptabschnitte oder Kapitel der PDF-Datei auf, zusammen mit den Seitenzahlen, auf denen jeder Abschnitt beginnt. Auf diese Weise können die Leser bestimmte Teile des Dokuments schnell finden und anspringen, was den Zugriff auf die benötigten Informationen erleichtert.

IronPDF bietet eine Funktion zur Erstellung eines Inhaltsverzeichnisses mit Hyperlinks zu den Elementen 'h1', 'h2', 'h3', 'h4', 'h5' und 'h6'. Die Standardformatierung dieses Inhaltsverzeichnisses steht nicht im Widerspruch zu anderen Formatierungen im HTML-Inhalt.

Erste Schritte mit IronPDF

Beginnen Sie noch heute mit der Verwendung von IronPDF in Ihrem Projekt mit einer kostenlosen Testversion.

Erster Schritt:

Kostenloser Start

Beispiel für das Hinzufügen eines Inhaltsverzeichnisses

Verwenden Sie die Eigenschaft TableOfContents, um die Erstellung eines Inhaltsverzeichnisses im PDF-Ausgabedokument zu aktivieren. Diese Eigenschaft kann einem der drei TableOfContentsTypes zugewiesen werden, die im Folgenden beschrieben werden:

• Keine: Kein Inhaltsverzeichnis erstellen
• Basic: Erstellen eines Inhaltsverzeichnisses ohne Seitenzahlen

• WithPageNumbers: Erstellen eines Inhaltsverzeichnisses MIT Seitenzahlen

  Um diese Funktion besser zu verstehen, können Sie die nachstehende HTML-Beispieldatei herunterladen:

• Laden Sie die HTML-Beispieldatei herunter

Code

:path=/static-assets/pdf/content-code-examples/how-to/table-of-contents.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,
};

PdfDocument pdf = renderer.RenderHtmlFileAsPdf("tableOfContent.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}

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

pdf.SaveAs("tableOfContents.pdf")

Ausgabe PDF

Das Inhaltsverzeichnis wird mit Hyperlinks zu jedem der Elemente 'h1', 'h2', 'h3', 'h4', 'h5' und 'h6' erstellt.

Platzierung des Inhaltsverzeichnisses in der PDF-Datei

1. Sicherstellen, dass ein HTML-Dokument die richtigen Header-Tags hat(h1 bis h6).

2. Fügen Sie optional ein Div für die Stelle ein, an der das Inhaltsverzeichnis erscheinen soll. Wenn das unten stehende Div nicht angegeben wird, fügt IronPDF das Inhaltsverzeichnis am Anfang ein.

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

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

3. In den Darstellungsoptionen können Sie wählen, ob das Inhaltsverzeichnis mit oder ohne Seitenzahlen dargestellt werden soll.

   ---

Gestaltung des Inhaltsverzeichnisses

Das Inhaltsverzeichnis kann mit CSS gestaltet werden, indem die verschiedenen CSS-Selektoren verwendet werden, die den Stil des Inhaltsverzeichnisses definieren.

Darüber hinaus wird das Styling über die Eigenschaft CustomCssUrl geändert. Laden wir zunächst eine CSS-Datei herunter, die das Original-Styling für das unten stehende Inhaltsverzeichnis enthält.

• Laden Sie die benutzerdefinierte CSS-Datei herunter

  Bevor Sie fortfahren

  Derzeit wird nicht empfohlen, die Eigenschaften page-break-before und page-break-after bei der Gestaltung von Inhaltsverzeichnissen zu überschreiben, da dadurch die Berechnung der Seitenzahl unterbrochen wird. Die derzeitige Implementierung erwartet, dass das Inhaltsverzeichnis auf separaten Seiten vom übrigen Dokumentinhalt steht.

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

Stil-Überschriften

Verwenden Sie den Selektor 'ironpdf-toc ul li.h1', um dem H1-Header im Inhaltsverzeichnis eine andere Formatierung zuzuweisen. Ersetzen Sie 'h1' durch 'h2' bis 'h6', um das Styling für die jeweiligen Überschriften zu ändern.

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

Schriftfamilie

Mit den beiden Selektoren '#ironpdf-toc li .title' und '#ironpdf-toc li .page' ist es möglich, die Schriftfamilie des Inhaltsverzeichnisses zu überschreiben. Verwenden wir die Schriftart 'cursive' für den Titel und nutzen wir das Attribut @font-face, um die benutzerdefinierte 'Zitrone', entworfen von Eduardo Tunni.

• Herunterladen der Schrift Lemon

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

Vertiefung

Die Einrückung kann mit dem Selektor ':root' gesteuert werden. Dieser Wert bestimmt den Umfang des Einzugs für jede Kopfebene(h1, h2, ...) in der Inhaltsübersicht. Sie kann je nach Bedarf erhöht werden, oder es kann keine Einrückung mit einem Wert von 0 geben.

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

Dot Line

Entfernen Sie die gestrichelten Linien zwischen Überschrift und Seitenzahl. Im Original-Styling lautet der zweite Parameter "currentcolor 1px". Ändern Sie sie in "transparent 1px", um die Punkte zu entfernen. Es ist wichtig, auch andere Attribute anzugeben, da bei diesem Selektor die neue Gestaltung die alte Gestaltung vollständig überschreibt, anstatt sie nur zu ergänzen.

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

Chaknith Bin

Software-Ingenieur

Chaknith ist der Sherlock Holmes der Entwickler. Zum ersten Mal kam ihm der Gedanke, dass er eine Zukunft in der Softwareentwicklung haben könnte, als er zum Spaß an Code Challenges teilnahm. Sein Schwerpunkt liegt auf IronXL und IronBarcode, aber er ist stolz darauf, Kunden mit jedem Produkt zu helfen. Chaknith nutzt sein Wissen aus direkten Gesprächen mit Kunden, um die Produkte selbst weiter zu verbessern. Sein anekdotisches Feedback geht über Jira-Tickets hinaus und unterstützt die Produktentwicklung, die Dokumentation und das Marketing, um das Gesamterlebnis der Kunden zu verbessern.Wenn er nicht im Büro ist, lernt er über maschinelles Lernen, programmiert und wandert.