Como Crear Un PDF con “window.print()” de JavaScript

Como Crear Un PDF con “window.print()” de JavaScript
4 minuto(s)

Demo Github

Existen varias maneras de crear un PDF en HTML, dar la posibilidad a los usuarios de obtener la copia de un libro, una tesis, fórmulas, gráficos, etc. en formato PDF es una buena idea para fomentar el conocimiento, ese PDF puede pasarse de usuario a usuario y estos creceran más en conocimientos. En este Post te enseñaré a Como Crear Un PDF con “window.print()” de JavaScript, vamos con ello.

Antes de continuar te invito a leer los siguientes artículos:

Asimismo, te invito a escuchar el Podcast: “Porque El Lenguaje De Programación Python Es Tan Popular“¿ Qué Es NoCode Development ?” (Anchor Podcast): 

Spotify: Sound Cloud: Apple Podcasts Anchor Podcasts

Te recomiendo estudiar el Curso JavaScript desde 0 que es 100 % Gratuito, cuenta con mas de 70 videos a tu disposición:

En el curso de JavaScript conocerás todas las nociones técnicas de este Lenguaje el cual es uno de los más usados en el mundo. 

Bien ahora continuemos con el Post: Como Crear Un PDF con “window.print()” de JavaScript. 

Existen muchas librerías que nos permiten crear un PDF rápidamente y junto con CSS y HTML, se pueden mejorar el diseño del mismo. En este tutorial crearemos el PDF con puro JavaScript, de esta manera tendremos más control sobre su proceso de creación.

CSS

Haré uso de la regla @media print en donde especificamos los margenes correspondientes para el PDF, asimismo le damos algunos estilos a la clase .texto


Ahora pasemos al código JavaScript.

JavaScript

Hacemos uso del método addEvenListener() para definir el botón al cual se hará clic y el contenedor que tiene la información para el PDF. Hacemos uso de window.print() y aplicamos algunos estilos al botón:


Pasemos al código HTML.

HTML

En el código HTML hago uso de un div con id contenedor y dentro de el he agregado un botón con id crearpdf que al presionarlo nos crea el PDF. Asimismo he agregado un encabezado h1, una imagen, un párrafo y un enlace para el contenido del PDF. Puedes ver que estoy usando unas clases del framework Bootstrap, el uso de Bootstrap es opcional.


Si tienes dudas sobre Bootstrap, te recomiendo leer el Post: Que es Bootstrap, Historia y tu Primer Hola Mundo:

Entonces la vista HTML se vería de la siguiente manera en el navegador:

En la imagen anterior puedes ver que hay un botón verde que dice Crear PDF, si lo presionamos nos carga la vista de impresión en donde obtenemos el PDF, al lado derecho el usuario puede optar por elegir en Destino, el formato PDF para guardarlo:

Al inicio de este Post, he colocado una Demo para que veas el proyecto en acción y también he colocado un enlace a un repositorio en GitHub con el código fuente del proyecto.

Conclusión

Hemos creado una funcionalidad básica para generar PDF, teniendo esta base puedes crear cosas más personalizadas.

Nota (s)

  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo. 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.