1. IronPDF
  2. 操作指南
  3. 添加目录

How to Add Table of Contents

Chaknith Bin
Chaknith Bin
已更新:
This article was translated from English: Does it need improvement?
Translated
View the article in English

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

IronPDF提供了一个功能，可以创建链接到'h1'、'h2'、'h3'、'h4'、'h5'和'h6'元素的目录。 此目录的默认样式不会与HTML内容的其他样式发生冲突。

Nuget IconGet started making PDFs with NuGet now:

  1. Install IronPDF with NuGet Package Manager

    PM > Install-Package IronPdf

  2. Copy and run this code snippet.

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

  3. Deploy to test on your live environment

    Start using IronPDF in your project today with a free trial
    arrow pointer
class="hsg-featured-snippet">

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

  1. 下载用于添加目录的C#库
  2. 准备要转换为PDF的HTML
  3. 设置TableOfContents属性以启用目录
  4. 通过选择是否显示页码来自定义目录
  5. 优化目录在输出PDF中的位置


添加目录示例

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

  • None：不创建目录
  • Basic：创建不带页码的目录
  • WithPageNumbers：创建带页码的目录

此功能使用JavaScript构建目录； 因此，引擎必须启用JavaScript。 为了更好地理解此功能，您可以下载下面的示例HTML文件：

代码

: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")
$vbLabelText   $csharpLabel

输出 PDF 文件

目录将被创建，并链接到每个'h1'、'h2'、'h3'、'h4'、'h5'和'h6'。

请注意在文档上使用Merge方法将破坏目录的链接。

目录在PDF中的位置

  1. 确保HTML文档具有适当的标题标签（h1至h6）。
  2. 可选地插入一个div，以在目录显示的位置。 如果未提供以下div，IronPDF将把目录插入到开始位置。
<div id="ironpdf-toc"></div>
<div id="ironpdf-toc"></div>
HTML
  1. 在渲染选项中，选择是渲染带页码或不带页码的目录。

目录样式

目录可以通过针对定义目录样式的各种CSS选择器来使用CSS进行样式化。

此外，可以使用CustomCssUrl属性进行样式修改。 让我们开始下载下面包含目录原始样式的CSS文件。

警告目前不建议在目录样式时覆盖page-break-before和page-break-after属性，因为这会破坏页码计算。 当前实现期望目录在文档其他内容的单独页面上。
### 样式标题

: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")
$vbLabelText   $csharpLabel

使用'#ironpdf-toc ul li.h1'选择器为目录中的H1标题应用不同样式。

将'h1'替换为'h2'至'h6'以更改每个相应标题的样式。

class="content-img-align-center">
class="center-image-wrapper"> 样式标题

 #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字体

 #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。

class="content-img-align-center">
class="center-image-wrapper"> 设置自定义缩进

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

点线

要去除标题和页码之间的虚线，请修改::after选择器的背景图像。

在原始样式中，第二个参数是 "currentcolor 1px"。 将其更改为 "transparent 1px" 以去除点线。 重要的是，其它属性也要指定，因为在此选择器中，新样式将完全覆盖旧样式，而不仅仅是添加到它。

class="content-img-align-center">
class="center-image-wrapper"> 去除点

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

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

常见问题解答

如何在.NET C#中向PDF添加目录？

您可以使用IronPDF通过在您的PDF生成设置中设置TableOfContents属性来向PDF添加目录。这将自动创建一个与您的PDF文档中标题元素链接的导航索引。

IronPDF中有哪些目录选项？

IronPDF提供了三种目录选项：无（没有目录）、基本（没有页码的目录）和带页码（包含页码的目录）。

如何确保目录出现在PDF中的特定位置？

要在特定位置放置目录，请在您的HTML文档中插入一个ID为'ironpdf-toc'的div。IronPDF将把目录放置在这个位置。

我可以使用CSS来设置目录的样式吗？

是的，IronPDF允许您使用CSS来设置目录的样式。您可以针对特定的目录元素修改其外观，并使用自定义CSS URL进行进一步的样式调整。

是否可以更改PDF中目录的字体？

您可以通过使用#ironpdf-toc li .title和#ironpdf-toc li .page CSS选择器来更改目录的字体。可以使用@font-face属性实现自定义字体。

如何防止合并PDF文档时目录的超链接中断？

在创建目录后使用Merge方法时，确保更新或重新生成目录以维持有效的超链接，因为合并可能会干扰它们。

在针对目录进行样式设计时需要注意什么与分页中断有关的事项？

避免在CSS中更改page-break-before和page-break-after属性，因为这可能会影响目录中的页码计算。

如何去除目录中标题和页码之间的点线？

要去除标题和页码之间的点线，请修改目录项的'::after'选择器的CSS，将background-image属性设置为'transparent 1px'。

如何控制目录中标题的缩进？

通过使用':root' CSS选择器来控制目录中标题的缩进，允许您为每个标题定义缩进级别。

目录在PDF文档中的作用是什么？

目录在PDF文档中起着导航工具的作用，列出章节或章节及其页码，帮助用户快速找到特定内容。

IronPDF 在添加目录时是否完全兼容 .NET 10？是否存在任何特殊注意事项？

是的，IronPDF 与 .NET 10 完全兼容，就像它与之前的 .NET 版本一样。在 .NET 10 下添加目录时，无需任何特殊配置更改；相同的 API 和属性（例如ChromePdfRenderOptions中的TableOfContents ）开箱即用。只需确保通过 NuGet 将 IronPDF 添加到您的 .NET 10 项目中，并确保渲染引擎已启用 JavaScript，目录功能即可正常工作。

Chaknith Bin
Chaknith Bin
  立即与工程团队聊天
软件工程师
Chaknith 在 IronXL 和 IronBarcode 工作。他在 C# 和 .NET 方面有着深厚的专业知识，帮助改进软件并支持客户。他从用户互动中获得的见解有助于更好的产品、文档和整体体验。
准备开始了吗？
Nuget 下载 16,154,058 | 版本: 2025.11 刚刚发布