Cómo añadir un índice
Í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.
Cómo añadir un índice
- Descargar la biblioteca C# para añadir un índice de contenidos
- Preparar el HTML para convertirlo en PDF
- Fije el TablaDeContenidos para activar el índice
- Personalice el índice eligiendo si desea mostrar o no los números de página.
- Optimizar la colocación del índice en el PDF de salida
Instalar con NuGet
Install-Package IronPdf
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
- Garantizar que un documento HTML tenga las etiquetas de encabezado adecuadas (h1 hasta h6).
- 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>
- 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")
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.
#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;
}
![Eliminar](/static-assets/pdf/how-to/table-of-contents/font-family.webp)
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;
}
![Establecer sangría personalizada](/static-assets/pdf/how-to/table-of-contents/indentation.webp)
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;
}
![Eliminar puntos](/static-assets/pdf/how-to/table-of-contents/dot-line.webp)