Convertir HTML a PDF

A qué puede acceder la página y qué controla el CSS

La conversión no tiene acceso a la red ni ejecuta scripts, y ambas son decisiones de seguridad, no funciones que falten. Un conversor que descargara todo lo que pidiera una página enviada podría apuntarse sin problema a direcciones que solo ve nuestro servidor, y uno que ejecutara scripts estaría ejecutando código de un desconocido. Por eso una hoja de estilos enlazada a un CDN no llega, una imagen con una dirección web normal no carga, una fuente web se sustituye sin aviso y una página que se dibuja con JavaScript se convierte según lo que diga el marcado antes de que se ejecute nada. La solución es siempre la misma: incluye el CSS en un bloque style e incrusta las imágenes como data URI. Los navegadores lo ofrecen directamente (“Guardar página como → Página web, completa” en Firefox, o “Guardar como MHTML”), y una página guardada en un solo archivo se convierte fielmente.

Lo que realmente rige el resultado es el CSS de impresión, y eso es lo segundo que conviene saber. La página se compone como si se imprimiera, así que un bloque @media print se aplica y una hoja de estilos normal de pantalla puede que no; por eso una página con una regla de impresión que oculta su navegación se convierte de maravilla y una sin ella arrastra todos los elementos del sitio. @page controla el papel: el tamaño, la orientación y los márgenes se leen de ahí. break-before, break-after y break-inside: avoid deciden dónde se dividen las páginas, así que una tabla que no debe partirse o una sección que debe empezar en una página nueva están totalmente bajo tu control.

Los fondos son el olvido clásico. Los navegadores no imprimen los colores ni las imágenes de fondo de forma predeterminada, así que un encabezado oscuro puede salir blanco salvo que la hoja de estilos indique -webkit-print-color-adjust: exact: una sola línea, y es la diferencia entre un documento con tu marca y uno desnudo. El texto sigue siendo texto real, los enlaces siguen funcionando y los títulos pueden convertirse en marcadores del PDF cuando el marcado usa elementos de encabezado auténticos.

Si nuestro servidor no está disponible, la página te lo indica y reconstruye el documento en tu dispositivo, lo que conserva el texto, las imágenes y el diseño sencillo, pero simplifica todo lo que necesita una composición real, como grid, flexbox, floats y posicionamiento. Un documento sencillo se convierte casi igual; uno diseñado, no.

Si buscas otra cosa

Para convertir una URL en vivo (algo que esta página no puede hacer a propósito), el mismo renderizado que funciona en nuestro servidor funciona en el tuyo: chrome --headless --disable-gpu --print-to-pdf=out.pdf https://example.com carga la página con su acceso a la red intacto, scripts incluidos. Esa es toda la diferencia, y es el motivo para recurrir a él.

Para un control real de encabezados, pies de página, números de página y márgenes, WeasyPrint y Prince implementan como corresponde la especificación CSS Paged Media: encabezados continuos desde @top-center, contadores de página, notas al pie y referencias cruzadas que se resuelven en números de página. WeasyPrint es gratis y es lo que usan la mayoría de los flujos de documentación. Chrome no admite casi nada de eso, así que un informe generado con “Página 3 de 12” en el pie necesita uno de ellos y no esta herramienta.