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.

Instalar con NuGet

Install-Package IronPdf

nuget.org/packages/IronPdf/

o

Descargar DLL

Descargar DLL

Instalar manualmente en su proyecto

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;

//  Instanciar renderizador
ChromePdfRenderer renderer = new ChromePdfRenderer();

//  Configurar las opciones de renderizado
renderer.RenderingOptions = new ChromePdfRenderOptions
{
    //  Activar la función de tabla de contenido
    TableOfContents = TableOfContentsTypes.WithPageNumbers,
};

PdfDocument pdf = renderer.RenderHtmlFileAsPdf("tableOfContent.html");

pdf.SaveAs("tableOfContents.pdf");

Imports IronPdf
Imports System.IO

'  Instanciar renderizador
Private renderer As New ChromePdfRenderer()

'  Configurar las opciones de renderizado
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 seguir

  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;

//  Instanciar renderizador
ChromePdfRenderer renderer = new ChromePdfRenderer();

//  Configurar las opciones de renderizado
renderer.RenderingOptions = new ChromePdfRenderOptions
{
    //  Activar la función de tabla de contenido
    TableOfContents = TableOfContentsTypes.WithPageNumbers,
    CustomCssUrl = "./custom.css"
};

//  Leer texto HTML de un archivo
string html = File.ReadAllText("tableOfContent.html");
PdfDocument pdf = renderer.RenderHtmlAsPdf(html);

pdf.SaveAs("tableOfContents.pdf");

Imports IronPdf
Imports System.IO

'  Instanciar renderizador
Private renderer As New ChromePdfRenderer()

'  Configurar las opciones de renderizado
renderer.RenderingOptions = New ChromePdfRenderOptions With {
	.TableOfContents = TableOfContentsTypes.WithPageNumbers,
	.CustomCssUrl = "./custom.css"
}

'  Leer texto HTML de un archivo
Dim html As String = File.ReadAllText("tableOfContent.html")
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(html)

pdf.SaveAs("tableOfContents.pdf")

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.