如何添加目錄
目錄 (目錄) 就像一張路線圖，幫助讀者瀏覽 PDF 文件的內容。一般出現在開頭，列出 PDF 的主要部分或章節，並標明每個部分開始的頁碼。這讓讀者可以快速找到並跳轉到文檔的特定部分，更輕鬆地獲取所需的信息。
IronPDF 提供了一個功能，可以創建帶有超鏈接的目錄，鏈接到 'h1', 'h2', 'h3', 'h4', 'h5', 和 'h6' 元素。這個目錄的默認樣式不會與 HTML 內容中的其他樣式衝突。
如何添加目錄
- 下載用於添加目錄的 C# 庫
- 準備要轉換為PDF的HTML
- 設置 目錄 啟用目錄的屬性
- 透過選擇是否顯示頁碼來自訂目錄
- 優化目錄在輸出 PDF 上的位置
立即開始在您的專案中使用IronPDF，並享受免費試用。
查看 IronPDF 上 Nuget 快速安裝和部署。已被下載超過800萬次，它正用C#改變PDF。
請考慮安裝 IronPDF DLL 直接下載並手動安裝到您的專案或GAC表單： IronPdf.zip
添加目錄範例
使用 TableOfContents 屬性來啟用在輸出 PDF 文件中創建目錄。此屬性可以分配給以下三種 TableOfContentsTypes 之一，說明如下：
- None: 不創建目錄
- Basic: 創建不帶頁碼的目錄
- WithPageNumbers: 創建帶頁碼的目錄
要更好地理解此功能，您可以下載以下範例 HTML 文件： 下載範例 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 目錄的位置
確保 HTML 文件具有適當的標頭標籤 (h1 到 h6).
- 可選地 插入一個 div 用於顯示目錄。如果未提供下方的 div，IronPDF 將在開始處插入目錄。
<div id="ironpdf-toc"></div> <div id="ironpdf-toc"></div>- 在渲染選項中，選擇是否顯示頁碼來渲染目錄。
樣式化目錄
目錄可以使用 CSS 進行樣式化，通過針對定義目錄樣式的各種 CSS 選擇器。
此外，樣式的修改是通過 CustomCssUrl 屬性完成的。我們首先下載一個包含下列目錄的原始樣式的 CSS 文件。 下載自訂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' 選擇器，可以覆蓋目錄的字型系列。讓我們使用 'cursive' 字型來作為標題，並利用 @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;
}
縮排
可以使用 ':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;
}
