1. IronPDF
2. Cómo Hacer
3. Añadir índice

Cómo añadir un índice

por Chaknith Bin

Índice(TOC) es como una hoja de ruta que ayuda a los lectores a navegar por el contenido del documento PDF. Suele aparecer al principio y enumera las principales secciones o capítulos del PDF, junto con los números de página donde empieza cada sección. Esto permite a los lectores encontrar y saltar rápidamente a partes específicas del documento, facilitando el acceso a la información que necesitan.

IronPDF proporciona una función para crear una tabla de contenidos con hipervínculos a los elementos 'h1', 'h2', 'h3', 'h4', 'h5', y 'h6'. El estilo por defecto de esta tabla de contenidos no entrará en conflicto con otros estilos del contenido HTML.

Comience con IronPDF

Comience a usar IronPDF en su proyecto hoy con una prueba gratuita.

Primer Paso:

Empezar gratis

Añadir índice Ejemplo

Utilice la propiedad TableOfContents para habilitar la creación de una tabla de contenidos en el documento PDF de salida. Esta propiedad puede asignarse a uno de los tres TableOfContentsTypes, que se describen a continuación:

• No: No crear índice
• Básico: Crear un índice sin números de página

• ConNúmerosDePágina: Crear un índice CON números de página

  Para comprender mejor esta función, puede descargar el archivo HTML de ejemplo que figura a continuación:

• Descargar el archivo HTML de ejemplo

Código

:path=/static-assets/pdf/content-code-examples/how-to/table-of-contents.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,
};

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

Salida PDF

El índice se creará con hipervínculos a cada uno de los 'h1', 'h2', 'h3', 'h4', 'h5', y 'h6'.

Colocación del índice en el PDF

1. Garantizar que un documento HTML tenga las etiquetas de encabezado adecuadas(h1 hasta h6).

2. Opcionalmente inserte un div para donde quiera que aparezca la Tabla de Contenidos. Si no se proporciona el siguiente div, IronPDF insertará el Índice al principio.

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

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

3. En las opciones de representación, elija representar el índice con o sin números de página.

   ---

Estilizar el índice

El índice de contenidos puede personalizarse mediante CSS, utilizando los distintos selectores CSS que definen el estilo del índice de contenidos.

Además, la modificación del estilo se realiza mediante la propiedad CustomCssUrl. Empecemos descargando un archivo CSS que contiene el estilo original de la tabla de contenido que aparece a continuación.

• Descargar el archivo CSS personalizado

  Antes de proceder

  En la actualidad, no se recomienda sobrescribir las propiedades page-break-before y page-break-after al aplicar estilos a las tablas de contenido, ya que se romperían los cálculos de número de página. La implementación actual espera que los índices estén en páginas separadas del resto del contenido del documento.

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

Cabeceras de estilo

Utilice el selector 'ironpdf-toc ul li.h1' para aplicar un estilo diferente al encabezado H1 del índice. Sustituya 'h1' por 'h2' hasta 'h6' para cambiar el estilo de cada cabecera.

#ironpdf-toc ul li.h1 {
    font-style: italic;
    font-weight: bold;
}

Familia de fuentes

Con los selectores '#ironpdf-toc li .title' y '#ironpdf-toc li .page', es posible sobrescribir la familia de fuentes del índice. Usemos la fuente "cursiva" para el título y utilicemos el atributo @font-face para usar la fuente personalizada 'LimónFuente diseñada por Eduardo Tunni.

• Descargar la fuente 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;
}

Indentación

La sangría puede controlarse mediante el selector ':root'. Este valor determina la cantidad de sangría para cada nivel de cabecera(h1, h2, ...) en el índice. Se puede aumentar según sea necesario, o no puede haber sangría con un valor de 0.

:root {
    --indent-length: 25px;
}

Línea de puntos

Elimine las líneas de puntos entre el título de la cabecera y el número de página. En el estilo original el segundo parámetro es "currentcolor 1px". Cámbialo a "transparente 1px" para eliminar los puntos. Es importante especificar también otros atributos porque, en este selector, el nuevo estilo anulará completamente el estilo anterior en lugar de sólo añadirlo.

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

Chaknith Bin

Ingeniero de software

Chaknith es el Sherlock Holmes de los desarrolladores. La primera vez que se le ocurrió que podría tener futuro en la ingeniería de software fue cuando hacía retos de código por diversión. Su trabajo se centra en IronXL e IronBarcode, pero se enorgullece de ayudar a los clientes con todos los productos. Chaknith aprovecha sus conocimientos, adquiridos hablando directamente con los clientes, para ayudar a mejorar los propios productos. Sus comentarios anecdóticos van más allá de los tickets de Jira y apoyan el desarrollo de productos, la documentación y el marketing, para mejorar la experiencia general del cliente.Cuando no está en la oficina, se le puede encontrar aprendiendo sobre aprendizaje automático, codificación y senderismo.