如何在 C# | IronPDF 中添加目录

如何在 C# 中添加目录

This article was translated from English: Does it need improvement?
Translated
View the article in English

IronPDF允许您通过设置h6)。

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

  1. 使用 NuGet 包管理器安装 https://www.nuget.org/packages/IronPdf

    PM > Install-Package IronPdf
  2. 复制并运行这段代码。

    new ChromePdfRenderer { RenderingOptions = { CreateOutlineMaps = true, OutlineMapsFormat = TableOfContentsTypes.WithPageNumbers, FirstPageNumber = 1 } }
        .RenderHtmlFileAsPdf("myDocument.html")
        .SaveAs("withToc.pdf");
  3. 部署到您的生产环境中进行测试

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

    arrow pointer


什么是 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 示例文件:

生成目录需要哪些代码?

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

:path=/static-assets/pdf/content-code-examples/how-to/table-of-contents-3.cs
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")
$vbLabelText   $csharpLabel

生成的 PDF 看起来像什么?

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

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

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


Icon Quote related to 生成的 PDF 看起来像什么?

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

Milan Jovanovic related to 生成的 PDF 看起来像什么?

Milan Jovanovic

微软MVP

查看案例研究
Icon Quote related to 生成的 PDF 看起来像什么?

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

Brent Matzelle related to 生成的 PDF 看起来像什么?

Brent Matzelle

首席技术官,OPYN

查看案例研究
Icon Quote related to 生成的 PDF 看起来像什么?

Iron Suite 在我们的运营中起着至关重要的作用。这些工具提高了业务各方面的效率,包括创建平面图和改善库存管理。

David Jones related to 生成的 PDF 看起来像什么?

David Jones

首席软件工程师,Agorus Build

查看案例研究

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

  1. 确保HTML文档具有适当的标题标签(h6)。
  2. 可选 插入一个 div,以指定您希望目录出现的位置。 如果未提供以下div,IronPDF将把目录插入到开始位置。
<div id="ironpdf-toc"></div>
<div id="ironpdf-toc"></div>
HTML
  1. 在渲染选项中,选择是渲染带页码或不带页码的目录。

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

<!DOCTYPE html>
<html>
<head>
    <title>My Document</title>
</head>
<body>

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

    <div style="page-break-after: always;"></div>

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

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

    <div style="page-break-after: always;"></div>

    <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 文件。

警告目前,不建议在为目录设置样式时覆盖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标题。 将h6更改每个相应标题的样式。

 #ironpdf-toc ul li.h1 {
    font-style: italic;
    font-weight: bold;
 }
风格化的目录,用虚线将分层的章节与页码连接起来

如何更改字体家族?

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

 #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选择器控制缩进。 该值决定了目录中每个标题级别(h2等)的缩进量。

:root {
    --indent-length: 25px;
}
带有自定义缩进章、节和课的目录,显示页码的虚线引线

如何删除或自定义点线?

要删除标题标题和页码之间的虚线,请修改::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;
 }
包含章节和课程的目录,显示分层缩进和右对齐的页码

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

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

准备好看看您还能做些什么吗? 查看我们的教程页面:转换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 内容中的其他样式冲突。生成的目录会保持自己独立的样式,以确保正确显示,同时保留现有文档内容的外观。

Curtis Chau
技术作家

Curtis Chau 拥有卡尔顿大学的计算机科学学士学位,专注于前端开发,精通 Node.js、TypeScript、JavaScript 和 React。他热衷于打造直观且美观的用户界面,喜欢使用现代框架并创建结构良好、视觉吸引力强的手册。

除了开发之外,Curtis 对物联网 (IoT) 有浓厚的兴趣,探索将硬件和软件集成的新方法。在空闲时间,他喜欢玩游戏和构建 Discord 机器人,将他对技术的热爱与创造力相结合。

准备开始了吗?
Nuget 下载 20,296,129 | 版本: 2026.7 刚刚发布
Still Scrolling Icon

还在滚动吗?

想快速获得证据? PM > Install-Package IronPdf
运行示例看着你的HTML代码变成PDF文件。