Cómo convertir una página web a PDF: conversión desde URL y desde HTML

Quieres archivar una página web, guardar un artículo para leerlo sin conexión, conservar un pedido como documento o generar un informe desde tu propio HTML. La conversión de HTML a PDF es la respuesta a esas necesidades, pero, por la propia naturaleza de las páginas web, tiene algunas sorpresas.

Dos usos distintos

Conversión de URL: das una dirección web, la herramienta carga esa página y genera el PDF. Se usa para archivar y guardar.

Conversión de código HTML: das el HTML que has preparado tú. Se usa para generar de forma programática documentos como facturas, informes o certificados.

Los dos usan el mismo motor, pero te encuentras con problemas distintos.

Paso 1: Comprueba que la página se puede convertir

Si estás convirtiendo una URL, algunas páginas dan problemas:

Páginas que exigen iniciar sesión. La herramienta accede por su cuenta a esa dirección y no lleva tu información de sesión. El resultado es el PDF de una pantalla de acceso o de una página de error. Para esas páginas tendrás que usar "Imprimir como PDF" en tu navegador con la sesión abierta.

Contenido tras un muro de pago. El mismo problema.

Contenido cargado con JavaScript. Algunos sitios cargan el contenido con peticiones aparte después de abrirse la página. Si la herramienta genera el PDF antes de que se cargue el contenido, obtendrás una página vacía o incompleta. Las buenas herramientas esperan a que la página cargue, pero en páginas con desplazamiento infinito nunca se obtiene el contenido completo.

Sitios que bloquean bots. Algunos sitios impiden el acceso automatizado.

Avisos de cookies y ventanas emergentes. Se incluyen en el PDF y pueden tapar parte del contenido.

Paso 2: Entiende los estilos de impresión

Este es el punto que más sorprende.

La mayoría de sitios web definen en su CSS dos conjuntos de estilos distintos:

/* Para pantalla */
nav { display: block; }

/* Para impresión */
@media print {
  nav, .sidebar, .ads { display: none; }
  body { font-size: 12pt; color: #000; }
}

La generación del PDF usa los estilos de impresión. Normalmente eso es bueno:

• Se ocultan los menús, las barras laterales y los anuncios.
• Los colores se simplifican y el texto queda más legible.
• Se aplica una maquetación adecuada al ancho de página.

Pero a veces también produce resultados indeseados:

• Puede ocultarse un cuadro de información importante.
• Se pierde la identidad visual del sitio.
• Algunos sitios no han definido estilos de impresión y la maquetación sale rota.

Además entra en juego el diseño adaptable: si la página cambia su maquetación según el ancho de pantalla, el ancho de página del PDF (unos 794 píxeles para A4) puede activar la maquetación móvil. El resultado es una disposición distinta de la que ves en el escritorio.

Paso 3: Determina los ajustes de página

Lo que hay que configurar antes de convertir:

Tamaño de página. A4 es el estándar en Europa; Letter se usa en América. Si el documento se va a imprimir, elige el que corresponda a la región de destino.

Orientación. La vertical es lo estándar. Para páginas con tablas anchas o gráficos horizontales, la horizontal puede dar mejor resultado.

Márgenes. El valor por defecto suele ser de 1-2 cm. Ponerlos a cero lleva el contenido hasta el borde, pero las impresoras no pueden imprimir en una franja de unos 5 mm desde el borde: si el documento se va a imprimir, deja margen.

Escalado. Si la página es muy ancha se puede aplicar una reducción. Pero un escalado excesivo vuelve ilegible el texto; los valores por debajo del 70 % suelen ser problemáticos.

Gráficos de fondo. Vienen desactivados por defecto, un comportamiento integrado para ahorrar tinta. En los diseños de fondo oscuro, si ese ajuste está desactivado el texto puede volverse ilegible (el texto blanco sobre fondo negro queda blanco sobre blanco al no imprimirse el fondo). Puede que tengas que activarlo.

Encabezado y pie. Al imprimir desde el navegador se añaden automáticamente el título de la página, la URL y la fecha. Es útil para archivar, pero puede no ser deseable en un documento limpio.

Paso 4: Haz la conversión

Abre la herramienta de conversión de HTML a PDF, introduce la URL o pega tu código HTML, configura los ajustes y convierte.

Durante el proceso, la herramienta carga la página, aplica los estilos, calcula la maquetación y la reparte en páginas.

Paso 5: Comprueba la salida

¿El contenido está completo? Sobre todo, ¿han llegado las secciones cargadas con JavaScript?

¿Los saltos de página son razonables? ¿Se ha partido una tabla por la mitad? ¿Un título se ha quedado solo al pie de página? ¿Una imagen ha quedado cortada?

¿Los enlaces funcionan? Los buenos conversores transforman los hipervínculos en enlaces de PDF. Prueba unos cuantos.

¿El texto es seleccionable? ¿Ha llegado como texto real o se ha convertido la página en una imagen? Un texto seleccionable es mucho más valioso, porque se puede buscar y copiar.

¿Los caracteres acentuados están bien? Comprueba las tildes, la ñ y los signos de apertura.

Colores y fondos. ¿Han salido como esperabas?

¿El número de páginas es razonable? Si es inesperadamente largo, puede haber contenido oculto o repetido en la página.

Si estás convirtiendo tu propio HTML

Si generas documentos como facturas, informes o certificados a partir de HTML, tienes control total sobre la maquetación. Reglas CSS que puedes usar:

Tamaño de página y márgenes:

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

Control de saltos de página:

/* Que este elemento no se parta en dos */
table, figure { page-break-inside: avoid; }

/* Que empiece una página nueva antes de este elemento */
h1 { page-break-before: always; }

/* Que no haya salto justo después de un título */
h2 { page-break-after: avoid; }

Control de líneas huérfanas y viudas:

p {
  orphans: 3;  /* que queden al menos 3 líneas al pie de página */
  widows: 3;   /* que haya al menos 3 líneas al principio de la página */
}

Mostrar las direcciones de los enlaces:

@media print {
  a[href]::after { content: " (" attr(href) ")"; }
}

Esto hace visible en un documento impreso adónde llevan los enlaces.

Elección de tipografía. Las tipografías web (como las de Google Fonts) se cargan de fuentes externas. Si el entorno de conversión no tiene acceso a esos recursos, la tipografía no se carga y la maquetación se desplaza. En documentos críticos es más seguro incrustar la tipografía o usar tipografías del sistema.

Problemas frecuentes

| Problema | Causa | Solución | |---|---|---| | La página sale en blanco | El contenido JavaScript no se ha cargado | Ajuste de tiempo de espera o imprimir desde el navegador | | No salen los fondos | Ajuste por defecto | Activa la opción de gráficos de fondo | | Aparecen menús y anuncios | No hay estilo de impresión definido | Imprime desde el navegador y usa el modo lectura | | La maquetación sale en versión móvil | Se ha activado el diseño adaptable | Aumenta el ancho de página u orientación horizontal | | Una tabla se ha partido en dos | No hay control de salto de página | Si es tu propio HTML, añade la regla CSS | | La tipografía es distinta | La tipografía web no se ha cargado | Usa una tipografía del sistema | | Los enlaces no se pueden pulsar | Límite del conversor | Prueba otro método | | Ha salido la página de acceso | No se traslada la sesión | Imprime desde el navegador |

Alternativa: imprimir desde el navegador

En algunos casos, la función de "Imprimir como PDF" de tu propio navegador da mejor resultado:

Páginas que exigen sesión. Tú ya has iniciado sesión.

Páginas con mucho JavaScript. El contenido ya está cargado.

Contenido personalizado. Tu carrito, tu cuenta, tus ajustes.

El precio es que el navegador aplica sus propios ajustes de página y normalmente añade encabezado y pie. Puedes corregir esos ajustes desde el diálogo de impresión.

La función de "modo lectura" de algunos navegadores también es útil: despoja la página de menús y anuncios y muestra solo el texto del artículo. Generar el PDF en ese modo da un resultado mucho más limpio.

En resumen

La conversión de HTML a PDF produce un documento repartido en páginas fijas usando los estilos de impresión de la página web. Es normal que salga distinto de lo que ves en pantalla: se ocultan los menús, los colores se simplifican y el diseño adaptable puede adoptar otra maquetación. Los gráficos de fondo no se imprimen por defecto y en los diseños de fondo oscuro puede que haya que activar ese ajuste. En las páginas que exigen sesión y en las que cargan contenido con JavaScript, la función de impresión del propio navegador es más fiable. Si estás convirtiendo tu propio HTML, puedes controlar los saltos de página con reglas CSS como @page, page-break-inside y orphans/widows y obtener una salida profesional.