如何添加目录
目录 (技术选择委员会) 就像是帮助读者浏览 PDF 文档内容的路线图。它通常出现在开头，列出 PDF 的主要部分或章节，以及每个部分开始的页码。这样，读者就能快速找到并跳转到文档的特定部分，从而更轻松地获取所需的信息。
IronPDF 提供了创建目录的功能，目录中的超链接指向 "h1"、"h2"、"h3"、"h4"、"h5 "和 "h6 "元素。该目录的默认样式不会与 HTML 内容中的其他样式冲突。
如何添加目录
- 下载用于添加目录的 C# 库
- 准备将 HTML 转换为 PDF
- 设置 目录 属性来启用目录
- 自定义目录，选择是否显示页码
- 优化输出 PDF 目录的位置
开始在您的项目中使用IronPDF，并立即获取免费试用。
查看 IronPDF 上 Nuget 用于快速安装和部署。它有超过800万次下载，正在使用C#改变PDF。
考虑安装 IronPDF DLL 直接。下载并手动安装到您的项目或GAC表单中： IronPdf.zip
添加目录示例
使用 TableOfContents 属性可在输出 PDF 文档中创建目录。该属性可分配给三种TableOfContentsType之一，具体描述如下：
- 无：不创建目录
基本：创建不带页码的目录
- WithPageNumbers：创建有页码的目录
要更好地了解这一功能，可下载下面的 HTML 示例文件：
代码
:path=/static-assets/pdf/content-code-examples/how-to/table-of-contents.csusing 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")输出 PDF
目录将包含到每个 'h1'、'h2'、'h3'、'h4'、'h5' 和 'h6' 的超链接。
请注意
Merge 方法会破坏目录的超链接。PDF 上的目录位置
1.确保 HTML 文档有正确的页眉标记 (h1 至 h6).
- 可选择在您希望目录出现的位置插入一个 div。如果没有提供下面的 div，IronPDF 将在开头插入目录。
<div id="ironpdf-toc"></div> <div id="ironpdf-toc"></div>- 在渲染选项中选择渲染有页码或无页码的目录。
目录的样式
可以使用 CSS 来设置目录的样式，方法是使用定义目录样式的各种 CSS 选择器。
此外，还可以使用 CustomCssUrl 属性修改样式。让我们先下载一个 CSS 文件，其中包含下面目录的原始样式。
在继续之前
:path=/static-assets/pdf/content-code-examples/how-to/table-of-contents-overwrite-styling.csusing 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 属性使用自定义的".page "字体。柠檬字体由 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 "选择器来控制。该值决定了每一级标题的缩进量 (h1, h2, ...) 在目录中。可以根据需要增加缩进量，也可以不缩进（值为 0）。
:root {
--indent-length: 25px;
}
点线
删除页眉标题和页码之间的虚线。在原始样式中，第二个参数是 "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;
}
