Cómo convertir HTML a PDF

Crear PDFs a partir de HTML es útil para generar facturas, informes, cartas, certificados y cualquier documento donde quieras controlar la disposición con CSS pero distribuir como PDF. Un convertidor HTML-a-PDF basado en navegador usa el motor de renderizado de tu propio navegador, así que el resultado coincide con lo que ves en la vista previa en vivo, sin cargas al servidor.

Cómo convertir HTML a PDF

1. Pega tu HTML: introduce tu código HTML incluyendo cualquier CSS en línea o etiquetas <style> en el editor. El código puede incluir la estructura completa de la página con encabezados, tablas, imágenes y estilos.
2. Previsualiza la salida: una vista previa en vivo muestra exactamente cómo se verá tu PDF mientras escribes. Ajusta tu HTML y CSS hasta que la vista previa coincida con lo que quieres.
3. Genera y descarga: haz clic en el botón generar para crear el PDF en tu navegador, luego descárgalo al instante.

Lo que puedes crear

• Facturas y recibos: tablas estructuradas con marca de empresa, líneas de elementos y totales
• Informes: documentos con formato con encabezados, párrafos, gráficos y tablas de datos
• Certificados: diseños estilizados con fuentes personalizadas, bordes y texto centrado
• Cartas: correspondencia profesional con encabezado, cuerpo y áreas de firma
• CV: diseños diseñados que se exportan como PDFs limpios para solicitudes de empleo
• Boletos y pases de eventos: bloques estructurados de códigos QR con información de asistentes
• Etiquetas de envío: formatos estandarizados para transportistas postales
• Tarjetas de embarque y confirmaciones: versiones imprimibles de reservas en línea
• Invitaciones: tarjetas estilizadas con imágenes, fuentes y bordes decorativos

Una breve historia de la conversión HTML-a-PDF

En la Web temprana (1995-2005), crear un PDF a partir de HTML requería herramientas del lado del servidor: Apache FOP (1999), PrinceXML (2002) o wkhtmltopdf (2010), todas las cuales se ejecutaban en un servidor backend y requerían cargar contenido. La calidad de salida variaba enormemente porque cada motor de renderizado implementaba CSS de manera diferente.

La conversión del lado del navegador se volvió práctica en 2014 con bibliotecas como jsPDF y html2pdf.js, que usan HTML5 Canvas para rasterizar contenido. El resultado era decente para documentos simples pero fallaba en diseños complejos y texto seleccionable.

El gran avance fue el modo headless de Chromium (2017), que expuso el mismo motor de renderizado que Chrome usa para páginas normales. Puppeteer (Node.js, 2017) hizo accesible la generación de PDF Chromium del lado del servidor para los desarrolladores. Los convertidores basados en navegador ahora usan Print API (window.print()) con reglas CSS @page, el mismo camino que usa el modo headless de Chromium, dando una salida idéntica entre la vista previa y el PDF.

En 2026, HTML-a-PDF basado en navegador es la elección correcta para la mayoría de los documentos. El renderizado del lado del servidor solo tiene sentido para documentos muy grandes (100+ páginas), procesamiento por lotes automatizado o cuando necesitas fusionar PDFs de múltiples fuentes.

Consejos de estilo para salida PDF

Usa estilos en línea o etiquetas <style>: las hojas de estilo externas no se cargan. Pon todo tu CSS ya sea en línea en elementos o en un bloque <style> en el HTML.

Establece márgenes de página: usa CSS @page { margin: 20mm; } para controlar el espacio en blanco alrededor de tu contenido en el PDF.

Usa unidades aptas para impresión: mm, cm y pt son más predecibles en PDFs que px o rem. Usa mm para márgenes y espaciado que necesiten coincidir con dimensiones del mundo real.

Evita diseños dependientes del viewport: los anchos en porcentaje y los anchos de píxeles fijos funcionan mejor. Las unidades de viewport (vw, vh) pueden no comportarse como se espera en la salida PDF.

Controla los saltos de página: usa page-break-before, page-break-after y page-break-inside (o los más nuevos break-before, break-after, break-inside) para controlar dónde comienzan las nuevas páginas. break-inside: avoid evita que un solo bloque se divida entre páginas.

Usa @media print para reglas solo PDF: cualquier CSS dentro de @media print { ... } se aplica solo al generar el PDF, no en la vista previa. Útil para ocultar elementos solo de pantalla como barras de navegación.

Ejemplo de modo impresión CSS

@page {
  size: A4;
  margin: 20mm 15mm;
}

@media print {
  .no-print { display: none; }
  h1 { page-break-before: always; }
  table { page-break-inside: avoid; }
  a { color: black; text-decoration: none; }
}

body {
  font-family: 'Helvetica', sans-serif;
  font-size: 11pt;
  line-height: 1.4;
  color: #1a1a1a;
}

Tamaños de página

Valores comunes de @page size:

• A4 (210 × 297 mm) - predeterminado global fuera de EE. UU.
• letter (8.5 × 11 in) - predeterminado de EE. UU.
• legal (8.5 × 14 in) - documentos legales de EE. UU.
• A3 (297 × 420 mm) - carteles, planos
• A5 (148 × 210 mm) - folletos, panfletos
• Personalizado: size: 100mm 150mm para cualquier dimensión

Agrega landscape para orientación horizontal: size: A4 landscape.

Errores comunes

• Las fuentes externas no se cargan: las fuentes web alojadas en CDNs externos pueden no estar incrustadas. Usa @font-face con un archivo de fuente codificado en base64 dentro de la etiqueta <style>, o atente a las fuentes del sistema (Helvetica, Times, Arial, Courier).
• Las imágenes cargan lentamente o no del todo: las imágenes externas pueden no estar listas cuando se genera el PDF. Usa URIs de datos base64 para inclusión garantizada: <img src="data:image/png;base64,iVBORw0KGgoAAAA...">.
• Colores de fondo eliminados al imprimir: los navegadores eliminan colores e imágenes de fondo por defecto al imprimir para ahorrar tinta. Agrega -webkit-print-color-adjust: exact; print-color-adjust: exact; a tu body o elementos específicos.
• Diseños CSS Grid rompiéndose: los motores PDF más antiguos no soportan completamente CSS Grid. Prueba con la vista previa en vivo; vuelve a table o Flexbox si Grid produce resultados inesperados.
• Saltos de página en medio de una fila de tabla: usa tr { page-break-inside: avoid; } para mantener las filas juntas, o thead { display: table-header-group; } para repetir el encabezado de la tabla en cada página.
• Los tamaños de píxeles no coinciden con las dimensiones físicas: 1 px CSS = 1/96 pulgada al imprimir. Así que una caja width: 96px tiene exactamente 1 pulgada de ancho en el PDF. Usa mm o pt para dimensionado físico inequívoco.
• Los hipervínculos pierden color: los PDFs renderizan las etiquetas <a> con su color definido por CSS. Si quieres texto negro pero hipervínculos funcionales, usa color: black y deja que el subrayado visual del lector de PDF indique el enlace.

Alternativas a considerar

• Imprimir a PDF directamente desde el navegador (Ctrl/Cmd+P, luego "Guardar como PDF"): cero configuración, funciona para cualquier página web que puedas abrir. Mejor para conversiones únicas.
• Renderizado del lado del servidor (Puppeteer, Playwright, PrinceXML): para generación por lotes, automatización o documentos muy grandes. Requiere configuración de desarrollo.
• Markdown a PDF: si escribes en Markdown, herramientas dedicadas (Pandoc, Marp, Typora) manejan la conversión en un paso sin andamiaje HTML.
• Plantillas de documentos (DocRaptor, Tectonic, LaTeX): para documentos altamente tipográficos (artículos académicos, libros) donde necesitas control preciso sobre kerning, ligaduras, matemáticas.

Para documentos comerciales cotidianos (facturas, informes, certificados), un convertidor HTML-a-PDF de navegador es más rápido y igualmente pulido.

Consejos

• Previsualiza primero: siempre revisa la vista previa en vivo antes de generar. Es mucho más rápido iterar en HTML que generar un nuevo PDF cada vez.
• Usa base64 para imágenes: convierte imágenes a URIs de datos base64 para inclusión garantizada en el PDF. Las URLs externas pueden fallar debido a restricciones CORS.
• Mantenlo simple: los diseños CSS complejos (cuadrículas anidadas, elementos posicionados superpuestos) pueden no renderizarse perfectamente. Los diseños más simples producen PDFs más confiables.
• Prueba los saltos de página: para documentos de varias páginas, usa page-break-before: always para controlar dónde comienzan las nuevas páginas.
• CSS en modo impresión: envuelve tus estilos finales en @media print { ... } para que se apliquen solo al PDF generado, no a la vista previa. Útil para ocultar elementos de UI de pantalla.
• Usa HTML semántico: <h1>, <h2>, <p>, <table> producen PDFs accesibles más limpios que <div> en todas partes. Los lectores de pantalla los analizan correctamente cuando el usuario abre el PDF.

Privacidad y documentos confidenciales

El convertidor HTML-a-PDF se ejecuta completamente en tu navegador. El HTML que pegas, las imágenes que incrustas y el PDF generado todos permanecen en tu dispositivo. No se sube nada a un servidor, no se registra ni se comparte con nadie.

Esto importa porque las entradas HTML-a-PDF a menudo son sensibles: datos de facturas con nombres de clientes, borradores de contratos con términos de precios, informes internos con cifras financieras, certificados con información personal. Los servicios HTML-a-PDF en la nube por diseño envían tu HTML a su servidor, generan el PDF allí y lo envían de vuelta. Algunos retienen entradas para "mejora" o análisis. Para documentos que contienen información confidencial, un convertidor basado en navegador es la opción más segura.

La conversión basada en navegador también funciona sin conexión una vez cargada la página, y es lo suficientemente rápida para retroalimentación instantánea mientras iteras en el HTML.