Cómo guardar una página web como PDF (y que se vea bien)

Guardar una web en PDF es útil para conservar un justificante de compra, una receta, un artículo para leer sin conexión o una prueba de lo que decía una página en una fecha concreta. El problema es que el resultado suele salir con menús partidos, banners de cookies y medio contenido cortado.

Estas son las tres formas de hacerlo, según lo que necesites.

Opción 1: desde el navegador (lo más rápido)

Todos los navegadores pueden "imprimir" a PDF:

  1. Abre la página y pulsa Ctrl + P (Cmd + P en Mac).
  2. En Destino, elige Guardar como PDF.
  3. En Más ajustes:
    • Activa Gráficos de fondo si quieres conservar colores y fondos.
    • Desactiva Encabezados y pies de página para quitar la URL y la fecha de los márgenes.
    • Ajusta la Escala si el contenido se sale por la derecha.
  4. Pulsa Guardar.

Es lo ideal para justificantes y artículos. Su punto débil: muchas webs tienen estilos de impresión pobres o directamente esconden contenido al imprimir.

Truco: si el navegador tiene Modo lectura (Firefox, Safari, Edge), actívalo antes de imprimir. Quita menús y anuncios y deja solo el texto y las imágenes.

Opción 2: convertir un archivo HTML a PDF

Si eres desarrollador, diseñador o generas informes y facturas en HTML, lo más cómodo es convertir el archivo directamente:

  1. Guarda la página como .html (con los estilos incrustados, si es posible).
  2. Súbela al conversor de HTML a PDF.
  3. Descarga el PDF.

El conversor respeta el CSS: estilos en línea, etiquetas <style> y hojas de estilo externas. Ten en cuenta dos cosas:

  • No ejecuta JavaScript. Si el contenido se genera con JS (gráficos, tablas que se cargan después), guarda primero el HTML final desde el navegador (Guardar como > Página web completa) y convierte ese archivo.
  • Una página cada vez. Para un sitio entero, convierte cada página por separado.

Opción 3: que el PDF quede bonito (si la web es tuya)

Si controlas el HTML, unas pocas reglas CSS de impresión cambian mucho el resultado:

@media print {
  nav, footer, .cookie-banner, .ads { display: none; }
  body { font-size: 12pt; }
  table, img, figure { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
}

@page { size: A4; margin: 2cm; }
  • display: none oculta menús, pies y avisos que no aportan nada en papel.
  • break-inside: avoid evita que tablas e imágenes se partan entre dos páginas.
  • @page fija el tamaño de papel y los márgenes.

Problemas típicos y su solución

  • El PDF sale con fondo blanco y sin colores: activa Gráficos de fondo o añade print-color-adjust: exact; al CSS.
  • El contenido se corta por la derecha: baja la escala al 80–90 % o usa orientación horizontal.
  • Aparece el aviso de cookies en todas las páginas: acéptalo o ciérralo antes de imprimir.
  • Faltan imágenes: algunas webs las cargan al hacer scroll. Baja hasta el final de la página antes de convertir.