How to Add Table of Contents

添加目錄示例

使用 TableOfContents 屬性啟用在輸出 PDF 文件中創建目錄。 此屬性可以分配為三種 TableOfContentsTypes 之一，其描述如下：

• None: 不創建目錄
• Basic: 創建不帶頁碼的目錄
• WithPageNumbers: 創建帶有頁碼的目錄

此功能使用 JavaScript 來構建目錄； 因此，必須啟用引擎的 JavaScript。 為了更好地理解本功能，您可以下載下面的示例 HTML 文件：

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

PDF 上的目錄位置

1. 確保 HTML 文檔有正確的標題標籤（h1 到 h6）。
2. 可選地 插入一個 div 作為目錄出現的位置。 如果未提供以下 div，IronPDF 將在開始處插入目錄。

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

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

3. 在渲染選項中，選擇渲染目錄是否帶有頁碼。

目錄的樣式

目錄可以使用 CSS 針對定義目錄樣式的各種 CSS 選擇器進行樣式化。

此外，還可以使用 CustomCssUrl 屬性進行樣式修改。 讓我們從下載下面包含目錄原始樣式的 CSS 文件開始。

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

使用 '#ironpdf-toc ul li.h1' 選擇器對目錄中的 H1 標題應用不同樣式。

將 'h1' 替換為 'h2' 到 'h6'，以更改每個相應標題的樣式。

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

字體系列

通過 '#ironpdf-toc li .title' 和 '#ironpdf-toc li .page' 選擇器，可以覆蓋目錄的字體系列。

為此，我們可以對標題使用草書字體，並使用 @font-face 屬性來使用由 Eduardo Tunni 設計的自定義 'Lemon' 字體。 - 下載 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;
 }

縮排

可以使用 ':root' 選擇器來控制縮排。

此值決定目錄中每個標題級別（h1、h2、...）的縮進量。 可以根據需要增加，或者使用值 0 則無縮進。

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

點線

要移除標題和頁碼之間的虛線，修改 ::after 選擇器的背景圖像。

在原始樣式中，第二個參數為“currentcolor 1px”。 將其更改為“transparent 1px”以去除點線。 重要的是還需指定其他屬性，因為在此選擇器中，新樣式會完全覆蓋舊樣式，而不只是添加到其上。

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

準備看看您還能做哪些其他事情嗎？ 在這裡查看我們的教程頁面：轉換PDF