Categorías

← View All Tools

HTML a PDF (Diseño Preciso)

Renderiza HTML/CSS a PDF con encabezados, pies y ajustes de impresión precisos

Esta herramienta renderiza HTML/CSS a PDF usando un navegador sin interfaz para un diseño de alta fidelidad.

Encabezado y Pie:

  • Plantillas HTML personalizadas para encabezado/pie
  • Usa <span class="pageNumber"></span> y <span class="totalPages"></span>
  • CSS en encabezado/pie con estilos en línea

Opciones de Impresión:

  • Tamaños A4/Letter/Legal
  • Márgenes (mm)
  • Imprimir fondos y escala
  • Soporte @page y @media print (activar "Preferir tamaño de página CSS")

Datos clave

Categoría
Document Tools
Tipos de entrada
textarea, select, checkbox, number
Tipo de salida
file
Cobertura de muestras
4
API disponible
Yes

Resumen

Convierte código HTML y CSS en documentos PDF de alta fidelidad con encabezados, pies de página personalizados y control preciso sobre la maquetación. Utiliza un navegador sin interfaz para renderizar el contenido exactamente como se vería en pantalla, respetando estilos CSS avanzados, fondos y reglas de impresión.

Cuándo usarlo

  • •Necesitas generar PDFs con encabezados y pies de página personalizados que incluyan numeración de páginas.
  • •Quieres que el PDF conserve fielmente los estilos CSS, fondos y diseños complejos del HTML original.
  • •Requieres control sobre márgenes, tamaño de página, orientación y opciones de impresión avanzadas.

Cómo funciona

  • •Pega o escribe tu código HTML en el campo de contenido y añade CSS personalizado si es necesario.
  • •Configura las opciones de impresión: tamaño de página, márgenes, orientación y plantillas de encabezado/pie.
  • •Define las plantillas de encabezado y pie usando HTML con clases como pageNumber y totalPages para la numeración.
  • •Haz clic en generar para renderizar el HTML y descargar el PDF resultante con toda la maquetación preservada.

Casos de uso

Generar informes corporativos con encabezado con logo, numeración de páginas y pie con información confidencial.
Crear facturas y presupuestos en PDF con maquetación precisa, márgenes personalizados y orientación horizontal para tablas anchas.
Exportar documentación técnica o manuales desde HTML manteniendo estilos complejos, tablas de colores y formato de impresión profesional.

Ejemplos

1. Informe mensual corporativo

Analista de negocio
Contexto
La empresa necesita distribuir informes mensuales en PDF con el logo en cada página, numeración y marca de confidencialidad en el pie.
Problema
Generar un PDF profesional con encabezado personalizado, numeración automática y pie de página consistente en todas las hojas.
Cómo usarlo
Pegar el HTML del informe en "Contenido HTML", añadir estilos en "CSS personalizado" y configurar las plantillas de encabezado y pie con numeración.
Configuración de ejemplo
Encabezado: `<div style='font-size:10px;text-align:center;'><span class='pageNumber'></span> / <span class='totalPages"></span></div>`
Pie: `<div style='font-size:9px;text-align:center;'>Confidencial - Empresa S.A.</div>`
Tamaño: A4, Márgenes: 15mm
Resultado
PDF generado con numeración automática en cada página, encabezado centrado y pie con aviso de confidencialidad.

2. Factura con tabla ancha

Contable freelance
Contexto
Se necesita generar facturas con tablas de detalle que requieren más espacio horizontal que el formato vertical A4 estándar.
Problema
Las columnas de la factura se cortan o el texto es demasiado pequeño al imprimir en vertical.
Cómo usarlo
Crear el HTML de la factura con la tabla de líneas, activar la opción "Horizontal" y ajustar los márgenes laterales a 10mm.
Configuración de ejemplo
Orientación: Horizontal
Tamaño: A4
Márgenes: superior 20mm, inferior 15mm, izquierdo 10mm, derecho 10mm
Imprimir fondo: activado
Resultado
Factura en PDF con tabla completa visible, texto legible y formato profesional listo para enviar al cliente.

3. Manual técnico con estilos complejos

Desarrollador técnico
Contexto
La documentación técnica está escrita en HTML con código coloreado, notas destacadas y diagramas que deben conservar su apariencia en PDF.
Problema
Necesitar que el PDF mantenga todos los estilos CSS, colores de sintaxis y formato de código tal como se ven en el navegador.
Cómo usarlo
Copiar el HTML completo con los estilos CSS incluidos, activar "Imprimir fondo" y seleccionar "Preferir tamaño de página CSS" para respetar las reglas @page.
Configuración de ejemplo
Media type: print
Preferir tamaño de página CSS: activado
Escala: 1
Esperar hasta: networkidle0
Resultado
Manual en PDF con código coloreado, notas con fondos amarillos y diagramas perfectamente renderizados, listo para distribuir.

Probar con muestras

html, pdf
Muestras PDF
Muestras PDF generadas por herramientas 2026-02-01 a 2026-02-10
title token pdf
pdf
Muestras de HTML con Imágenes
Muestras de código fuente HTML con imágenes para probar la extracción
title token html
sample
Ejemplos de Presentaciones Markdown
Mazos Markdown estilo Remark/Marp para probar la exportacion a PDF
matched family pdf
pdf
Ejemplos de Comentarios de Código
Archivos de muestra de código con varios estilos de comentarios para probar la eliminación de comentarios
keywords html,css
sample

Hubs relacionados

Herramientas de Html para Convert
Explora 11 herramientas de html para flujos de convert y encuentra utilidades cercanas con rapidez.
Herramientas de Pdf para Convert
Explora 28 herramientas de pdf para flujos de convert y encuentra utilidades cercanas con rapidez.
Herramientas de Pdf
Explora 12 herramientas de pdf para flujos de utility y encuentra utilidades cercanas con rapidez.
Herramientas de Pdf para Generate
Explora 10 herramientas de pdf para flujos de generate y encuentra utilidades cercanas con rapidez.

Preguntas frecuentes

¿Cómo añado numeración de páginas en el encabezado o pie?

Usa `<span class="pageNumber"></span>` para el número actual y `<span class="totalPages"></span>` para el total de páginas dentro de tu plantilla HTML de encabezado o pie.

¿Qué tamaños de página están disponibles?

Puedes elegir entre A4, Letter, Legal y A5, además de activar la orientación horizontal si lo necesitas.

¿Puedo usar reglas CSS @media print?

Sí, activa la opción "Preferir tamaño de página CSS" para que se respeten las reglas @page y @media print definidas en tu CSS.

¿Qué hace la opción "Esperar hasta"?

Controla cuándo el navegador captura el contenido. "networkidle0" espera a que no haya peticiones de red, "load" espera al evento load, y "networkidle2" permite hasta 2 conexiones activas.

¿Se imprimen los fondos por defecto?

Sí, la opción "Imprimir fondo" está activada por defecto para conservar colores de fondo e imágenes en el PDF final.

Documentación de la API

Punto final de la solicitud

POST /es/api/tools/html-to-pdf-precise

Parámetros de la solicitud

Nombre del parámetro Tipo Requerido Descripción
htmlContent textarea Sí -
cssContent textarea No -
pageSize select No -
landscape checkbox No -
printBackground checkbox No -
scale number No -
marginTop number No -
marginBottom number No -
marginLeft number No -
marginRight number No -
headerTemplate textarea No -
footerTemplate textarea No -
mediaType select No -
waitUntil select No -
waitTime number No -
preferCssPageSize checkbox No -

Formato de respuesta

{
  "filePath": "/public/processing/randomid.ext",
  "fileName": "output.ext",
  "contentType": "application/octet-stream",
  "size": 1024,
  "metadata": {
    "key": "value"
  },
  "error": "Error message (optional)",
  "message": "Notification message (optional)"
}
Archivo: Archivo

Documentación de MCP

Agregue este herramienta a su configuración de servidor MCP: 

{
  "mcpServers": {
    "elysiatools-html-to-pdf-precise": {
      "name": "html-to-pdf-precise",
      "description": "Renderiza HTML/CSS a PDF con encabezados, pies y ajustes de impresión precisos",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=html-to-pdf-precise",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Puede encadenar múltiples herramientas, por ejemplo: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, máximo 20 herramientas.

Si encuentra algún problema, por favor, póngase en contacto con nosotros en [email protected]