Cómo convertir un archivo HTML a PDF con los estilos intactos
Por el equipo de FreePDF ·
Un archivo .html es algo frágil de enviarle a alguien. Se ve bien en el ordenador donde se creó y luego llega sin su hoja de estilos, o se abre en un navegador que lo maqueta de otra manera, o el correo lo bloquea como adjunto. Convertirlo a PDF fija la página: un solo archivo, el mismo diseño en cualquier sitio, y se imprime tal como se ve.
Qué se conserva y qué no
Sube el archivo .html o .htm y se renderiza a PDF igual que lo haría un navegador al prepararlo para imprimir. Conviene saber tres cosas antes de convertir:
- El CSS del archivo se aplica. Todo lo que esté en un bloque
<style>o en un atributostyle=se conserva: tipografías, colores, bordes, tablas, fondos. - JavaScript no se ejecuta. La página se renderiza tal como está en el archivo. Si un gráfico o una tabla los dibuja un script al cargar, en el PDF aparecerá el contenedor vacío del que partía.
- Las rutas relativas no resuelven. Un archivo subido no tiene una dirección respecto a la cual ser relativo, así que
<img src="images/logo.png">o<link href="style.css">no apuntan a nada. Las URL absolutas conhttps://sí se descargan con normalidad.
Lo último se arregla con una página autocontenida: pega el CSS dentro de un bloque <style> y usa URL completas para las imágenes o incrústalas como URI data:. La mayoría de las herramientas que generan informes en HTML —y la opción «Guardar página como → archivo único» de tu navegador— ya lo hacen así.
El papel y los márgenes se controlan desde el CSS
Como el renderizado ocurre como salida de impresión, el CSS de impresión se respeta. Si eres tú quien genera el HTML, con unas pocas reglas llegas lejos:
@page { size: A4; margin: 20mm; }define el tamaño del papel y los márgenes. UsaLetteren lugar deA4si es tu formato.break-before: pageen un encabezado hace que cada sección empiece en una hoja nueva.break-inside: avoiden una tabla o una tarjeta evita que se parta entre dos páginas.- Las reglas dentro de
@media printse aplican, así que la navegación, los banners y todo lo que esconderías de una impresora se queda fuera del PDF.
Cuándo es mejor el diálogo de impresión del navegador
Vale decirlo claro, porque muchas veces es la respuesta correcta: si lo que quieres es guardar como PDF una página web en vivo, ábrela e imprime a PDF. El navegador ya tiene la página cargada con sus imágenes, sus scripts ejecutados y tu sesión iniciada, así que captura cosas que un archivo subido simplemente no contiene.
Convertir el archivo aquí es la mejor vía cuando tienes un .html autocontenido en el disco —una factura que llegó por correo, un informe que escribió un script, la exportación de alguna herramienta, un recibo guardado— y quieres un PDF limpio, sin los encabezados, pies y números de página que el propio navegador estampa en los bordes. Además es reproducible: el mismo archivo da el mismo PDF siempre y en cualquier equipo, algo que no consigue un diálogo de impresión lleno de ajustes distintos en cada ordenador.
Y si el documento lo vas a escribir tú en lugar de convertirlo, Markdown se salta todo este problema: no hay CSS que gestionar ni imágenes que perseguir.
Preguntas frecuentes
¿Puedo darle una URL en vez de un archivo?
No: convierte el archivo que subes. Guarda primero la página (Ctrl+S / Cmd+S, eligiendo la opción de archivo único si tu navegador la ofrece) y sube eso. Si la página está detrás de un inicio de sesión, guardarla tú es de todos modos la única forma de que el contenido salga de ahí.
Mi PDF salió sin estilos. ¿Qué pasó?
Casi siempre es una hoja de estilos que vive en un archivo aparte. El HTML referencia style.css, lo que subiste era solo el HTML y no hay nada que cargar. Abre el archivo en un editor de texto, pasa el CSS a un bloque <style> dentro del <head> y vuelve a convertir.