如何在 C# 中新增目錄 | IronPDF

如何在 C# 中新增目錄

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

IronPDF 允許您透過設定 TableOfContents 屬性,在 C# 中為 PDF 文件新增目錄,該屬性會自動從 HTML 標題 (h6) 生成超連結導覽,並可選填頁碼。

快速入門:使用 C# 為 PDF 添加目錄

  1. using 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 提供一項功能,可建立包含超連結的目錄,連結至 h5 以及 h6 元素的超連結。 此目錄的預設樣式不會與 HTML 內容中的其他樣式產生衝突。 當您使用 IronPDF 建立新的 PDF 檔案時,目錄功能會自動掃描您的 HTML 標題,並建立一個與文件組織結構相符的階層式導覽架構。

生成的目錄包含可點擊的連結,讓讀者能直接跳轉至任何章節,對於長篇文件、報告及技術文件而言特別實用。 IronPDF 的目錄 (TOC) 實作在提供 Professional PDF 導覽功能之同時,亦能保留 HTML 的語義結構。

如何在 PDF 中加入目錄?

請使用 屬性,以在輸出 PDF 文件中建立目錄。 此屬性可指派給以下三種 之一,其說明如下:

  • 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 文件:

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

生成的 PDF 檔案看起來是什麼樣子?

目錄將包含指向 h5 以及 h6。 標題的層級結構將予以保留,子標題會正確地縮進於其父級區段之下。 您亦可為 PDF 文件添加頁碼,以配合目錄提供額外的導覽支援。

請注意若在文件中使用 `` 方法,將導致目錄中的超連結失效。

處理合併或分割 PDF 檔案時,請待所有文件組裝完成後再生成目錄,以確保頁碼參照與超連結功能均正確無誤。


我應該將目錄放在 PDF 的哪裡?

  1. 確保 HTML 文件具有正確的標題標籤()。
  2. 可選擇在您希望顯示目錄的位置插入一個 div 標籤。 若未提供下方的 div 標籤,IronPDF 將在文件開頭插入目錄。
<div id="ironpdf-toc"></div>
<div id="ironpdf-toc"></div>
HTML
  1. 在渲染選項中,選擇是否在目錄中顯示頁碼。

對於版面配置複雜的文件,請將目錄與頁首及頁尾結合,以建立Professional的文件結構。 以下是生成最佳目錄(TOC)的正確 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>
<!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 中管理字型時,目錄預設會繼承文件的字型設定,但可獨立進行自訂。

此外,可透過 `` 屬性進行樣式調整。 請先下載一個 CSS 檔案,其中包含下方目錄的原始樣式設定。

警告目前不建議在設計目錄樣式時覆寫 以及 屬性,因為這會導致頁碼計算失效。 (當前實作預期目錄將與其他文件內容分開顯示於不同頁面。)}]

: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 替換為 h2h6,以調整各標題的樣式。

 #ironpdf-toc ul li.h1 {
    font-style: italic;
    font-weight: bold;
 }
格式化的目錄,採用點線標記將層級化的章節與段落連結至頁碼

如何變更字型家族?

透過同時使用 '#IronPDF-toc li .title' 和 '#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;
 }
目錄(包含章節、節和單元),顯示點狀引導線及右對齊的頁碼

如何控制縮排?

可使用 ` 選取器來控制縮排。 此數值決定目錄中各標題層級(h2`、...)的縮排幅度。 可視需要增加縮排,或將值設為 0 以取消縮排。

:root {
    --indent-length: 25px;
}
目錄包含自訂縮排的章節、節和單元,並以點線引導至頁碼

如何移除或自訂虛線?

若要移除標題與頁碼之間的點線,請修改 `` 選擇器的 background-image 屬性。 在原始樣式中,第二個參數為"currentcolor 1px"。 請將其改為"透明 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 文件中加入目錄?

您可以透過 IronPDF 在 PDF 中加入目錄,方法是設定 ChromePdfRenderer 上的 TableOfContents 屬性。只需將 RenderingOptions.TableOfContents 設為 TableOfContentsTypes.Basic 以產生不含頁碼的目錄,或設為 TableOfContentsTypes.WithPageNumbers 以包含頁碼。IronPDF 會自動根據您的 HTML 標題(h1-h6 標籤)生成目錄。

生成目錄時使用了哪些 HTML 元素?

IronPDF 會透過掃描並利用 HTML 中的 h1、h2、h3、h4、h5 及 h6 標題元素,自動建立目錄。這些標題會形成一個反映文件組織結構的階層式導覽架構,且每個標題在生成的 PDF 目錄中皆會轉為可點擊的超連結。

目錄中可以包含頁碼嗎?

是的,IronPDF 提供兩種目錄選項:TableOfContentsTypes.Basic 會建立不含頁碼的目錄,而 TableOfContentsTypes.WithPageNumbers 則會在每個章節中包含頁碼。您可以在設定 RenderingOptions 時,選擇最符合文件需求的選項。

目錄功能是否需要 JavaScript?

是的,IronPDF 會使用 JavaScript 來建立目錄,因此渲染引擎必須啟用 JavaScript。此功能通常預設為啟用狀態,但若您已在渲染選項中停用 JavaScript,則需重新啟用該功能,才能讓目錄功能正常運作。

如何用一行程式碼設定帶有頁碼的目錄?

您可以透過以下單行程式碼,產生包含頁碼的目錄 PDF:new ChromePdfRenderer { RenderingOptions = { TableOfContents = TableOfContentsTypes.WithPageNumbers, FirstPageNumber = 1 } }.RenderHtmlFileAsPdf("myDocument.html").SaveAs("withToc.pdf"); 這將產生一個功能完整的目錄,包含超連結導覽與頁碼。

目錄的樣式會與我現有的 HTML 樣式產生衝突嗎?

不,IronPDF 的預設目錄樣式設計上不會與您 HTML 內容中的其他樣式產生衝突。生成的目錄會採用獨立的樣式,在確保正確顯示的同時,亦能維持您現有文件內容的外觀。

Curtis Chau
技術撰稿人

Curtis Chau 擁有卡爾頓大學(Carleton University)的電腦科學學士學位,專精於前端開發,並精通 Node.js、TypeScript、JavaScript 及 React。他熱衷於打造直觀且美觀的用戶介面,喜歡運用現代框架,並創建結構完善、視覺上吸引人的手冊。

除了開發工作之外,Curtis 對物聯網(IoT)抱有濃厚興趣,致力於探索整合硬體與軟體的創新方法。閒暇時,他喜歡玩遊戲和開發 Discord 機器人,將對科技的熱愛與創意相結合。

準備開始了嗎?
Nuget 下載 19,014,616 | 版本: 2026.5 just released
Still Scrolling Icon

還在往下捲動嗎?

想要快速確認成果嗎? PM > Install-Package IronPdf
執行範例 觀看您的 HTML 轉為 PDF。