C#에서 목차를 추가하는 방법

목차를 생성하려면 어떤 코드가 필요합니까?

: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");

보다 고급스러운 시나리오에서는 목차를 다른 렌더링 옵션 과 결합하여 포괄적인 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");

생성된 PDF 파일은 어떤 모습인가요?

목차는 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' 각각에 대한 하이퍼링크를 포함하여 생성됩니다. 헤더의 계층 구조가 유지되며, 하위 헤더는 상위 섹션 아래로 적절하게 들여쓰기됩니다. 목차와 함께 탐색을 더욱 편리하게 하기 위해 PDF에 페이지 번호를 추가 할 수도 있습니다.

병합되거나 분할된 PDF 파일을 다룰 때는 정확한 페이지 참조와 작동하는 하이퍼링크를 보장하기 위해 모든 문서 조립이 완료된 후에 목차를 생성해야 합니다.

헤더 레벨별로 스타일을 지정하려면 어떻게 해야 하나요?

목차의 H1 헤더에 다른 스타일을 적용하려면 '#ironpdf-toc ul li.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 속성을 활용하여 에두아르도 투니가 디자인한 사용자 지정 ' 레몬 ' 글꼴을 사용하십시오.

• Download the Lemon font

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

점선을 제거하거나 사용자 지정하려면 어떻게 해야 하나요?

머리글 제목과 페이지 번호 사이의 점선을 제거하려면 ::after 선택기의 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 변환 방법에 대한 튜토리얼 페이지는 여기에서 확인하세요.