Crear un PDF con HTML y CSS

Para crear PDF existen una gran variedad de herramientas; personalmente encuentro el uso de HTML y CSS sencillo, por lo que quiero mostrarte cómo hacer un PDF a partir de estos dos lenguajes de programación (ya sé que no son lenguajes de programación 😂).

Convertir una página a PDF es una tarea... «sencilla», únicamente tienes que imprimir la página que quieras hacia un archivo y listo, sin embargo el tamaño de una pantalla difiere bastante del de una hoja de papel estándar (8.5in x 11in) si intentas hacerlo así nadamás, encontrarás algo cómo esto...

Para dar estilo específico a la impresión, debes agregar una hoja de estilos que se utilize en esa situación, con especial atención al atributo media="print"

<link rel="stylesheet" href="style.css" media="print" />

Ahora solo queda hacer los estilos, necesarios para que se vea así:

Estilos

Unicamente pondré algunos que valen la pena mencionar, los demás los puedes encontrar en esta hoja de estilos

break-after: always; /* Forza el salto de línea después del elemento */
break-before: always; /* Forza el salto de línea antes del elemento */
break-inside: avoid; /* Previene el salto de línea en el elemento */

Una de las cosas que más hago al convertir una página a PDF es asignar manualmente algunos saltos de línea con break-after y break-before, para evitar errores (muy grandes) en el diseño, está claro que no podrás evitar todos, pero sí se puede ver más o menos decente.

Otro muy importante es evitar que algunos elementos se dividan entre dos páginas, con break-inside se puede lograr.

Además yo elimino los márgenes de mis contenedores más grandes (html, body, main) ya que en una impresión, el usuario puede asignar sus propios márgenes o incluso quitarlos.

Agrego una clase printable para ocultarla mientras se muestra en pantalla y hacerla visible en la impresión.

También elimino algunos elementos que no vale la pena tener en PDF, como videos, elementos interactivos e incluso ciertas secciones de la página como el header y footer entre otras.

Espero que esto te haya servido como introducción a los estilos de impresión, y me encantaría saber tus opiniones sobre esta capacidad de HTML y CSS en los navegadores modernos.

Adiós 👋🏽