Cómo convertir HTML a PDF (y conservar los estilos CSS)
Por qué las conversiones de HTML a PDF salen mal
Cualquiera que haya peleado con una exportación a PDF que se comporta mal conoce el sufrimiento. Conviertes un archivo HTML y el resultado es un desastre de diseños rotos, fuentes que faltan o una página que no se parece en nada a la vista previa de tu navegador. El problema no es el concepto, es la ejecución. Los renderizadores de PDF varían enormemente en cómo interpretan el CSS, y la mayoría de los conversores genéricos simplemente eliminan o ignoran las hojas de estilo a menos que los fuerces. El conflicto fundamental está entre el modelo de flujo del HTML y el modelo de página del PDF. El contenido web se expande y contrae para ajustarse a un viewport. Una página PDF tiene dimensiones fijas. No hay scroll, no hay redibujado dinámico. Unir estos dos mundos requiere un renderizador que entienda las reglas de página de CSS, maneje correctamente las fuentes incrustadas y respete los diseños modernos como flexbox y grid. Muchas herramientas simplemente no lo hacen. Los fallos comunes son deprimentemente predecibles: las Google Fonts no se cargan porque el conversor se ejecuta sin conexión; los colores de fondo desaparecen porque el renderizador usa por defecto un 'modo de impresión' que los elimina para ahorrar tinta; los diseños de varias columnas se colapsan en una sola y triste pila. Conocer estos escollos es la mitad de la batalla. Esta guía te mostrará cómo evitarlos, ya sea que uses la [herramienta de HTML a PDF](/convert/html-to-pdf) de CocoConvert o construyas tu propio flujo de trabajo.
Qué significa en realidad 'conservar los estilos CSS'
Antes de sumergirnos en las soluciones, seamos precisos sobre qué significa siquiera 'conservar el CSS'. El estilo en el contexto de un PDF no es una sola cosa; son cuatro categorías distintas, y no todas sobreviven a todos los métodos de conversión. **El estilo visual** es lo más frágil. Esto incluye colores, bordes, sombras de caja e imágenes de fondo. Los renderizadores de impresión a menudo suprimen los fondos por defecto para ahorrar tinta. En el propio diálogo de impresión de Chrome, por ejemplo, tienes que ir a 'Más ajustes' y marcar 'Gráficos de fondo' o tus fondos simplemente desaparecerán. **La tipografía** —familia de fuente, peso, tamaño, altura de línea— vive o muere según la disponibilidad de la fuente. Si tus fuentes se referencian mediante una URL remota, cualquier conversor que no obtenga recursos externos recurrirá a las fuentes predeterminadas del sistema. Tu hermosa tipografía Inter o Lato se convierte instantáneamente en una aburrida Times New Roman. La única forma segura de conservar las fuentes es incrustarlas. **El diseño (layout)** es donde las cosas se complican de verdad. Las características modernas de CSS como flexbox, CSS Grid y el posicionamiento absoluto son bien manejadas por los renderizadores basados en Chromium. Pero los motores más antiguos como wkhtmltopdf (que usa un motor WebKit de alrededor de 2013) destrozarán los diseños modernos de maneras predecibles y frustrantes. **El CSS específico de página**, como las reglas `@page`, `page-break-before` y `break-inside: avoid`, en realidad tiene mejor soporte en la conversión a PDF que en los navegadores. Este CSS existe específicamente para medios paginados. Usando bloques `@media print`, puedes crear estilos que solo se apliquen a la versión PDF, dándote un control preciso sin estropear la apariencia de tu sitio web. Saber en qué categoría cae tu problema de estilo te dice qué herramientas y técnicas probablemente lo solucionarán.
Cómo usar CocoConvert para convertir HTML a PDF
El [conversor de HTML a PDF](/convert/html-to-pdf) de CocoConvert funciona con un motor de renderizado moderno basado en Chromium. Esto significa que maneja CSS contemporáneo —incluyendo flexbox, Grid, variables de CSS y valores `calc()`— con alta fidelidad. A continuación te explicamos cómo obtener resultados perfectos. **Paso 1: Prepara tu archivo HTML.** Si tus estilos están en una hoja de estilos externa, tienes dos opciones: o bien los insertas en línea con una biblioteca como Juice, o te aseguras de que la ruta de la hoja de estilos sea relativa y esté incluida en tu subida. CocoConvert procesa un único archivo HTML a la vez y no obtiene URLs remotas. Las Google Fonts o las hojas de estilo alojadas en un CDN no se cargarán. **Paso 2: Incrusta tus fuentes.** Esto no es negociable para la tipografía personalizada. Convierte tus archivos de fuente a base64 e incrústalos directamente en un bloque `<style>` usando `@font-face`. Sí, esto aumenta el tamaño del archivo, pero es la única manera de garantizar que tus fuentes se rendericen correctamente. Para una fuente de cuerpo típica con pesos regular y negrita, esto podría añadir entre 80 y 150 KB a tu archivo HTML. **Paso 3: Sube y configura las opciones de página.** Una vez subido, CocoConvert presenta opciones para el tamaño de página (A4, Carta, Legal o dimensiones personalizadas), orientación y márgenes. Un A4 con márgenes de 15 mm en todos los lados es un valor predeterminado sólido. Si estás convirtiendo un panel o tabla anchos, cambia a orientación horizontal. **Paso 4: Habilita los gráficos de fondo.** Este es el error más común. En el panel de opciones de CocoConvert, debes activar la opción 'Imprimir fondos'. Si no lo haces, cualquier elemento con un `background-color` o `background-image` se renderizará como blanco liso. **Paso 5: Descarga y verifica.** No te limites a echar un vistazo al PDF en tu navegador. Ábrelo en un visor adecuado como Adobe Acrobat Reader y comprueba que las fuentes estén correctamente incrustadas yendo a Archivo > Propiedades > Fuentes. Cada fuente en la lista debería decir 'Subconjunto incrustado' al lado.
Manejando las limitaciones: lo que CocoConvert no puede hacer
Seamos honestos sobre lo que CocoConvert no es. Es un potente conversor de propósito general, pero ciertas tareas están fuera de su alcance. Conocer estas limitaciones de antemano te ahorrará la frustración de buscar soluciones que no existen. **Contenido renderizado con JavaScript.** Si tu página está construida con un framework como React o Vue, subir el archivo HTML de origen no funcionará. El conversor ve el HTML estático, no la página final construida por JavaScript. Para páginas con mucho JS, tu mejor opción es guardar primero el HTML completamente renderizado desde tu navegador (clic derecho > Guardar como > Página web, completa) y subir ese archivo. Alternativamente, necesitarías una herramienta de navegador sin interfaz gráfica (headless) como Puppeteer. **Elementos interactivos.** Los formularios, menús desplegables y estados :hover no son interactivos en un PDF. La conversión captura una instantánea estática del estado predeterminado del elemento. Si un acordeón está cerrado cuando se renderiza la página, estará cerrado en el PDF. No hay forma de evitar esto; es la naturaleza del PDF. **Archivos muy grandes.** CocoConvert tiene un límite de 50 MB en el plan gratuito y 200 MB en los planes de pago. Esto suena generoso, pero un archivo HTML con numerosas imágenes codificadas en base64 puede alcanzar estos límites sorprendentemente rápido. Un solo PNG de alta resolución puede añadir fácilmente de 3 a 5 MB al tamaño del archivo. **Animaciones SVG complejas.** Los SVG estáticos se renderizan de maravilla. Sin embargo, cualquier animación CSS o SMIL dentro de un SVG se congelará en su fotograma inicial. CocoConvert está diseñado para la conversión directa basada en archivos. Cuando tienes un documento HTML terminado y necesitas un PDF fiable, es la herramienta adecuada. Para flujos de trabajo complejos del lado del servidor que requieren ejecutar JavaScript, tendrás que buscar herramientas programáticas como Playwright o Puppeteer.
Técnicas de CSS que mejoran el resultado en PDF
Puedes ahorrarte un mundo de sufrimiento escribiendo CSS con el resultado en PDF en mente desde el principio. Arreglar problemas a posteriori siempre es más difícil. **Usa `@media print` para modificaciones específicas de PDF.** Esta es tu arma secreta. Envuelve cualquier regla solo para PDF en un bloque `@media print` para ocultar elementos como barras de navegación, eliminar sombras de caja que se ven sucias al imprimir o ajustar tamaños de fuente para la legibilidad en una página. Por ejemplo: ```css @media print { nav, .sidebar { display: none; } body { font-size: 11pt; } .card { box-shadow: none; border: 1px solid #ddd; } } ``` **Controla los saltos de página explícitamente.** No dejes que el renderizador decida dónde cortar las páginas. Usa `break-before: page` para forzar una nueva página PDF antes de una sección importante, y aplica `break-inside: avoid` a elementos como tablas y figuras para evitar que se partan torpemente entre dos páginas. Esto es absolutamente esencial para informes de aspecto profesional. **Establece dimensiones `@page` explícitas.** Si conoces el tamaño de página objetivo, decláralo en tu CSS. Esto evita desajustes entre tus estilos y la configuración del conversor, que pueden causar recortes de texto inesperados. ```css @page { size: A4 portrait; margin: 15mm 20mm; } ``` **Evita las unidades de viewport en diseños de impresión.** Unidades como `vw` y `vh` no tienen sentido en una página PDF fija. Para elementos que necesiten abarcar toda la página, usa `mm`, `pt` o porcentajes en su lugar. **Prueba primero con la vista previa de impresión de Chrome.** Antes de subir nada, pulsa Ctrl+P (o Cmd+P) y selecciona 'Guardar como PDF'. Esto te da una vista previa instantánea usando el mismo motor Chromium que impulsa a CocoConvert. Es la forma más rápida de iterar en tu CSS sin perder tiempo en subidas repetidas.
Convertir una página web completa (URL) vs. un archivo HTML
El enfoque para convertir un archivo HTML local es fundamentalmente diferente al de convertir una URL de una página web en vivo. Necesitas elegir la herramienta adecuada para el trabajo adecuado. **Convertir un archivo HTML local** es en lo que destaca la [herramienta de HTML a PDF](/convert/html-to-pdf) de CocoConvert. Este método requiere un documento autocontenido. Todo el CSS debe estar insertado en línea o en un bloque `<style>`, todas las imágenes deben estar codificadas en base64 o referenciadas mediante rutas relativas en un archivo ZIP, y las fuentes deben estar incrustadas. Piénsalo como enviar un paquete sellado: todo lo que el renderizador necesita debe estar dentro desde el principio. Esto hace que el proceso sea increíblemente fiable. **Convertir una página web en vivo por URL** es una bestia completamente diferente. Exige una herramienta que pueda iniciar una sesión de navegador real, navegar a la URL, esperar a que se ejecute el JavaScript y se descarguen las fuentes web, y luego imprimir a PDF. Herramientas como Puppeteer, Playwright o servicios como Browserless.io están diseñadas para esto. La contrapartida es una montaña de complejidad. Tienes que lidiar con la autenticación, los pop-ups de cookies, el contenido de carga diferida (lazy-loading) y las velocidades de red impredecibles. Para la mayoría de las tareas comunes —generar facturas en PDF a partir de una plantilla, exportar un informe o archivar un documento con estilo— el enfoque basado en archivos es más simple y mucho más predecible. Controlas la entrada por completo, por lo que la salida es consistente. Si estás construyendo un sistema que genera PDFs a partir de datos de usuario en vivo, la mejor práctica es un enfoque híbrido: rellena una plantilla HTML en tu servidor con los datos del usuario y luego pasa esa cadena HTML completamente renderizada a una API de conversión. La API de CocoConvert soporta este flujo de trabajo, aceptando HTML directamente en una solicitud POST.
Verificando el resultado: una lista de control de calidad para PDF
Solo porque un PDF se vea bien en tu pantalla no significa que esté listo. Antes de enviar ese archivo a un cliente o publicarlo, repasa esta lista de control rápida pero crucial. **¿Fuentes incrustadas?** Abre el PDF en Adobe Acrobat Reader y ve a Archivo > Propiedades > Fuentes. Cada fuente que usaste debería aparecer en la lista con 'Subconjunto incrustado'. Si una fuente no está incrustada, será reemplazada por una fuente predeterminada del sistema en cualquier máquina que no la tenga instalada, arruinando tu diseño. **¿Colores precisos?** El CSS web utiliza el espacio de color RGB. La mayoría de los PDFs destinados a pantallas están bien en RGB. Sin embargo, si el PDF está destinado a la impresión comercial, puede requerir un espacio de color CMYK, que es un paso de conversión separado que ocurre después del proceso inicial de HTML a PDF. **¿Texto seleccionable y buscable?** Intenta hacer clic y arrastrar para seleccionar una línea de texto. Si puedes, el texto es texto vectorial real, lo cual es bueno para la capacidad de búsqueda y la accesibilidad. Si no puedes seleccionarlo, es posible que el conversor haya rasterizado la página en una imagen plana, un desastre para copiar y pegar, los lectores de pantalla y la búsqueda de texto. **¿Número de páginas y saltos correctos?** Desplázate rápidamente por todas las páginas. ¿Hay algún encabezado huérfano al final de una página? ¿Están las tablas o gráficos divididos en lugares extraños? ¿Están las figuras separadas de sus leyendas? **¿Tamaño de archivo razonable?** Un PDF de diez páginas con mucho texto debería pesar bastante menos de 1 MB. Si pesa 15 MB, algo está mal. El culpable suele ser imágenes sin comprimir o una rasterización accidental de toda la página. **¿Hipervínculos funcionales?** Haz clic en cualquier enlace del documento. Un buen conversor preserva las etiquetas `<a href>` como enlaces clicables en el PDF final. CocoConvert lo hace por defecto, pero siempre vale la pena comprobarlo. Dedicar tres minutos a estas seis comprobaciones detectará el 95% de los problemas de conversión antes de que puedan causar problemas a otra persona. Es un pulido final que separa un resultado profesional de uno amateur.