HTML a PDF: Más Difícil de Lo Que Debería Ser

Tienes una bonita página web. La necesitas como PDF. Control+P, guardar como PDF. ¿Listo?

A veces. Pero a menudo el resultado tiene diseños rotos, imágenes faltantes, saltos de página raros y encabezados que se cortan a mitad de oración.

HTML y PDF son fundamentalmente diferentes. Hacerlos funcionar juntos requiere esfuerzo.

Por Qué Es Complicado

HTML es fluido. El contenido fluye para llenar el espacio disponible. Responsivo. Flexible.

PDF es fijo. Dimensiones de página específicas. Posicionamiento exacto. Nada fluye.

Convertir significa tomar algo diseñado para adaptarse y forzarlo en páginas rígidas.

Los Saltos de Página Son el Enemigo

Tu hermoso párrafo termina dividido en dos páginas. El encabezado de la tabla está en la página 3, los datos comienzan en la página 4.

CSS tiene propiedades page-break-before, page-break-after y page-break-inside. Se supone que controlan esto.

h2 {
  page-break-after: avoid;
}

table {
  page-break-inside: avoid;
}

"Se supone" porque el soporte del navegador varía. Prueba a fondo.

Qué Se Renderiza y Qué No

Fuentes web: A veces funcionan, a veces no. Prueba con fuentes reales, no respaldos.

Colores de fondo: A menudo excluidos por defecto (ahorra tinta). Verifica configuraciones "imprimir fondos".

Imágenes: Las imágenes externas pueden no cargar. Los problemas CORS aparecen en el momento de conversión.

Contenido renderizado con JavaScript: Si el contenido carga vía JS, podría no existir cuando el PDF capture la página.

Animaciones y transiciones: Desaparecidas. PDF es estático.

Hojas de Estilo de Impresión

CSS tiene un tipo de medio para impresión:

@media print {
  .no-print {
    display: none;
  }

  body {
    font-size: 12pt;
  }

  a::after {
    content: " (" attr(href) ")";
  }
}

Oculta navegación, ajusta fuentes, muestra URLs para enlaces. Diseña específicamente para salida de impresión.

Diferentes Métodos de Conversión

Impresión del navegador a PDF: Bueno para conversiones puntuales. Los resultados varían por navegador.

Navegadores headless (Puppeteer, Playwright): Control programático. Resultados consistentes. Requiere configuración.

Bibliotecas PDF (wkhtmltopdf, WeasyPrint): Herramientas dedicadas. Mejor control sobre la salida.

Servicios en línea: Sube HTML, obtén PDF. Conveniente para uso ocasional.

Cada uno tiene compensaciones en calidad, velocidad y control.

Consejos para Mejores Resultados

Usa anchos fijos. Los diseños responsivos causan resultados impredecibles. Establece un ancho específico para salida PDF.

Simplifica diseños. CSS grid y flexbox complejos pueden romperse. Los diseños más simples se convierten más confiablemente.

Incrusta fuentes. No dependas de que las fuentes del sistema estén disponibles.

Prueba temprano. No construyas toda la página y luego intentes la conversión PDF. Prueba mientras construyes.

Establece tamaño de página explícito. PDF piensa en páginas. Dile qué tamaño.

@page {
  size: A4;
  margin: 1cm;
}

Cuándo Usar PDF Nativo

Si necesitas control preciso (contratos, facturas, informes con formato exacto), considera generar PDF directamente en lugar de convertir HTML.

Bibliotecas como PDFKit, ReportLab o iText crean PDF sin la capa de conversión HTML.

Más trabajo, más control, resultados más predecibles.

---

La conversión de HTML a PDF funciona, pero requiere atención a estilos de impresión, saltos de página y las diferencias entre medios web e impresión. Prueba a fondo y establece expectativas en consecuencia.