Tutoriales

Cómo agregar números de página, fechas y títulos a tu PDF

Cómo agregar números de página, fechas y títulos a tu PDF

Si estás guardando una receta, una simple captura de pantalla está bien.

Pero si estás guardando una página web como evidencia legal, investigación académica o registros comerciales, una simple imagen no es suficiente. Necesitas contexto. Necesitas saber exactamente cuándo se guardó la página, de dónde vino y los números de página para una fácil referencia.

Nuestra herramienta tiene un motor profesional de "Encabezado y Pie de página" integrado. Te permite inyectar esta información automáticamente en cada página de tu PDF.

Aquí te mostramos cómo usarlo, incluidas algunas plantillas para copiar y pegar que puedes usar ahora mismo.

Cómo funciona

En la sección "Configuración avanzada" (Advanced Settings) de nuestra herramienta, encontrarás dos cuadros de texto:

  1. Header HTML (Aparece en la parte superior de cada página)
  2. Footer HTML (Aparece en la parte inferior de cada página)

header & footer templates

Puedes escribir HTML estándar aquí, pero la verdadera magia proviene del uso de nuestras Clases CSS Especiales. Si utilizas estos nombres de clase específicos, nuestro convertidor los rellenará automáticamente con los datos correctos:

  • <span class='date'></span> → Inserta la fecha de impresión actual.
  • <span class='title'></span> → Inserta el título de la página web.
  • <span class='url'></span> → Inserta la URL de origen.
  • <span class='pageNumber'></span> → Inserta el número de página actual.
  • <span class='totalPages'></span> → Inserta el número total de páginas.

3 Plantillas para Copiar y Pegar

Hemos escrito estas plantillas utilizando CSS puro y robusto (inline styles) para que funcionen perfectamente en el motor de PDF sin necesidad de hojas de estilo externas.

1. El "Número de Página Simple" (Pie de página)

Este es el clásico. Coloca un número de página pequeño y centrado en la parte inferior de cada página.

Pega esto en "Footer HTML":

<div style="font-size: 10px; text-align: center; width: 100%; padding-top: 5px;">
  Página <span class="pageNumber"></span> de <span class="totalPages"></span>
</div>

2. El Pie de página de "Archivo" (Legal/Investigación)

Perfecto para capturar evidencia. Muestra la URL de origen a la izquierda y la fecha en que se guardó a la derecha.

Pega esto en "Footer HTML":

<div style="font-size: 8px; width: 100%; border-top: 1px solid #ccc; padding-top: 5px; overflow: hidden;">
  <span style="float: left; max-width: 70%;">Fuente: <span class="url"></span></span>
  <span style="float: right;">Guardado: <span class="date"></span></span>
</div>

3. El Encabezado de "Informe Profesional"

Hace que tu captura web parezca un documento oficial. Pone el Título en negrita a la izquierda y la Fecha a la derecha.

Pega esto en "Header HTML":

<div style="font-size: 10px; width: 100%; margin-bottom: 10px; overflow: hidden;">
  <span style="float: left; font-weight: bold; max-width: 75%;" class="title"></span>
  <span style="float: right;" class="date"></span>
</div>

Consejos Importantes

  1. ⚠️ DEBES establecer márgenes: Los encabezados y pies de página se imprimen dentro de los márgenes de la página. Si tus márgenes están configurados en "0", ¡tu encabezado será invisible! Debes establecer los márgenes superior e inferior en al menos 0.4in (o 10mm) para que aparezcan estas plantillas.
  2. Tamaño de fuente: El motor de PDF trata los tamaños de fuente de manera diferente a una pantalla. Recomendamos usar de 8px a 10px. Cualquier cosa más pequeña podría desaparecer.

¿Listo para subir de nivel? Dominar los encabezados es solo un paso. Para obtener más consejos sobre cómo crear documentos profesionales, consulta La Guía Definitiva para Crear el PDF de Página Web Perfecto.

Artículos relacionados