如何在 C# 中添加目录

Updated: 2026年9月5日

IronPDF允许您通过设置h6）。

快速入门：使用 C# 为 PDF 添加目录

1Install IronPDF with NuGet Package Manager
PM > Install-Package IronPdf
```
Install-Package IronPdf
```

2复制并运行这段代码。

new ChromePdfRenderer { RenderingOptions = { CreateOutlineMaps = true, OutlineMapsFormat = TableOfContentsTypes.WithPageNumbers, FirstPageNumber = 1 } }
    .RenderHtmlFileAsPdf("myDocument.html")
    .SaveAs("withToc.pdf");

new ChromePdfRenderer { RenderingOptions = { CreateOutlineMaps = true, OutlineMapsFormat = TableOfContentsTypes.WithPageNumbers, FirstPageNumber = 1 } }
    .RenderHtmlFileAsPdf("myDocument.html")
    .SaveAs("withToc.pdf");

3部署到您的生产环境中进行测试

通过免费试用立即在您的项目中开始使用IronPDF

最小工作流程（5 个步骤）

下载用于添加目录的 C# 库。
准备要转换为PDF的HTML
设置 TableOfContents 属性以启用目录
选择是否显示页码
优化目录的位置

什么是 PDF 目录？

目录 (TOC) 是帮助读者浏览 PDF 文档内容的路线图。它通常出现在开头，并列出PDF的主要章节或部分，以及每个部分开始的页码。这使读者可以快速找到并跳转到文档的特定部分，使他们更容易获取所需的信息。

IronPDF提供了一项功能，可创建包含目录的目录，其中包含到h6元素的超链接。此目录的默认样式不会与HTML内容的其他样式发生冲突。当您使用 IronPDF 创建新的 PDF 文件时，目录功能会自动扫描您的 HTML 标题，并建立一个反映文档组织结构的分层导航结构。

生成的目录包括可点击的链接，读者可以直接跳转到任何部分，因此对于长文档、报告和技术文档特别有用。 IronPDF 的 TOC 实现保留了 HTML 的语义结构，同时提供专业的 PDF 导航功能。

如何在 PDF 中添加目录？

使用TableOfContents属性在输出的PDF文档中启用目录的创建。该属性可以分配给三种TableOfContentsTypes之一，描述如下：

None：不创建目录
Basic：创建没有页码的目录
WithPageNumbers：创建有页码的目录

此功能使用JavaScript构建目录；因此，引擎必须启用JavaScript。在将 HTML 文件转换为 PDF 时，IronPDF 的 JavaScript 引擎会处理您的页眉标签并生成相应的导航结构。要更好地理解该功能，请下载下面的 HTML 示例文件：

下载示例HTML文件

生成目录需要哪些代码？

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

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

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 文档：

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

Imports IronPdf

' Create renderer with multiple options
Dim renderer As New ChromePdfRenderer()
renderer.RenderingOptions = New ChromePdfRenderOptions With {
    ' 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
Dim htmlContent As String = "
<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>
"

Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(htmlContent)
pdf.SaveAs("document-with-toc.pdf")

Imports IronPdf

' Create renderer with multiple options
Dim renderer As New ChromePdfRenderer()
renderer.RenderingOptions = New ChromePdfRenderOptions With {
    ' 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
Dim htmlContent As String = "
<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>
"

Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(htmlContent)
pdf.SaveAs("document-with-toc.pdf")

生成的 PDF 看起来像什么？

目录将创建并包含到h6的超链接。保留标题的层次结构，在父节下适当缩进小标题。您还可以在 PDF 中添加页码，以便在目录旁边提供额外的导航支持。

Merge方法会破坏目录的超链接。

在处理合并或拆分的 PDF 文件时，应在所有文档组装完成后生成目录，以确保准确的页面引用和功能性超链接。

我最喜欢的这种库是 IronPDF。它允许快速高效地操作 PDF 文件。它还具有许多有价值的功能，比如导出为 PDF/A 格式和数字签名 PDF 文档。

Milan Jovanovic

微软MVP

查看案例研究

IronOCR 意味着我们每年可以节省 $40,000 的人工处理成本，同时提高生产力，并释放资源用于高影响任务。我强烈推荐它。

Brent Matzelle

首席技术官，OPYN

查看案例研究

我应该在 PDF 中的什么位置放置目录？

确保HTML文档具有适当的标题标签（h6）。
可选插入一个 div，以指定您希望目录出现的位置。如果未提供以下div，IronPDF将把目录插入到开始位置。

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

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

HTML

在渲染选项中，选择是渲染带页码或不带页码的目录。

对于布局复杂的文档，应将目录与页眉和页脚结合起来，以创建专业的文档结构。下面是一个正确的 HTML 结构示例，用于生成最佳的 TOC：

<!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

如何设计目录样式？

目录可以通过针对定义目录样式的各种CSS选择器来使用CSS进行样式化。在 PDF 中管理字体时，目录将默认继承文档的字体设置，但也可以独立定制。

另外，可以通过使用CustomCssUrl属性进行样式修改。首先下载包含以下目录原始样式的 CSS 文件。

下载自定义CSS文件

警告: 目前，不建议在为目录设置样式时覆盖page-break-after属性，因为这会破坏页码计算。 ### 样式标题

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

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

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标题。将h6更改每个相应标题的样式。

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

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

Text

如何更改字体家族？

使用'#ironpdf-toc li .page'选择器，可以覆盖目录的字体族。为此，标题应使用草书字体，并利用 @font-face 属性使用 Eduardo Tunni 设计的自定义"柠檬"字体。

下载 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;
 }

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

Text

如何控制缩进？

可以使用:root选择器控制缩进。该值决定了目录中每个标题级别（h2等）的缩进量。

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

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

Text

如何删除或自定义点线？

要删除标题标题和页码之间的虚线，请修改::after选择器的背景图像。将其更改为 "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;
 }

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

Text

要获得更高级的样式选项，可使用不同的模式创建自定义的引导线：

/* 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;
}

/* 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;
}

Text

准备好看看您还能做些什么吗？查看我们的教程页面：转换PDF文档

常见问题解答

如何在 PDF 文档中添加目录？

通过在 ChromePdfRenderer 上设置 TableOfContents 属性，您可以使用 IronPDF 为 PDF 添加目录。只需将 RenderingOptions.TableOfContents 设置为 TableOfContentsTypes.Basic 或 TableOfContentsTypes.WithPageNumbers 即可，前者用于不带页码的 TOC，后者用于包含页码的 TOC。IronPDF 将根据 HTML 标题（h1-h6 标记）自动生成 TOC。

使用哪些 HTML 元素生成目录？

IronPDF 通过扫描并使用 HTML 中的 h1、h2、h3、h4、h5 和 h6 标题元素自动创建目录。这些标题形成了一个分层导航结构，反映了文档的组织结构，每个标题都会成为生成的 PDF 目录中的一个可点击的超链接。

能否在目录中包含页码？

是的，IronPDF 提供两种目录选项：TableOfContentsTypes.Basic 可创建不带页码的 TOC，而 TableOfContentsTypes.WithPageNumbers 可为每个部分添加页码。您可以在设置 RenderingOptions 时选择最适合您文档需要的选项。

目录功能需要 JavaScript 吗？

是的，IronPDF 使用 JavaScript 构建目录，因此渲染引擎必须启用 JavaScript。这通常在默认情况下已启用，但如果您在渲染选项中禁用了 JavaScript，则需要启用 JavaScript 才能使目录功能正常工作。

如何在一行代码中设置带有页码的目录？

您可以使用以下一行来生成包含页码的 PDF 目录：new ChromePdfRenderer { RenderingOptions = { TableOfContents = TableOfContentsTypes.WithPageNumbers, FirstPageNumber = 1 }.}.RenderHtmlFileAsPdf("myDocument.html").SaveAs("withToc.pdf"); 这样就创建了一个带有超链接导航和页码的全功能 TOC。

目录样式会与我现有的 HTML 样式冲突吗？

不会，IronPDF 的默认目录样式设计不会与 HTML 内容中的其他样式冲突。生成的目录会保持自己独立的样式，以确保正确显示，同时保留现有文档内容的外观。

Can I specify where the table of contents should appear in my PDF using IronPDF?

Yes, you can specify a placeholder in your HTML using a div with the id `ironpdf-toc`. If not specified, IronPDF will automatically place the table of contents at the start of the document.

Does IronPDF support dynamic content like JavaScript when generating PDFs?

Yes, IronPDF supports dynamic content and can execute JavaScript during the conversion process, enhancing the interactivity of the generated PDF.

How can I download a sample HTML file to see how Table of Contents is structured?

You can download a sample HTML file directly from the IronPDF guide to understand how the table of contents is structured before converting it to a PDF.

What should I be cautious of when styling the table of contents in IronPDF?

When styling the table of contents, avoid modifying `page-break-before` and `page-break-after` properties within the TOC styling, as they may disrupt page number calculations in the PDF.