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

4 minuto(s)

En esta página:

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” y “¿ 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


@media print {
   @page {
     margin-left: 0.8in;
     margin-right: 0.8in;
     margin-top: 0;
     margin-bottom: 0;
   }
}

.texto {
	text-align: justify;
  	text-justify: inter-word;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

@media print {

@page {

margin-left: 0.8in;

margin-right: 0.8in;

margin-top: 0;

margin-bottom: 0;

}

}

.texto {

text-align: justify;

text-justify: inter-word;

}

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:


document.addEventListener("DOMContentLoaded", () => {
    let boton = document.getElementById("crearpdf");
    let container = document.getElementById("contenedor");

    boton.addEventListener("click", event => {
        event.preventDefault();
        boton.style.display = "none";
        window.print();
    }, false);

    container.addEventListener("click", event => {
        boton.style.display = "initial";
    }, false);

}, false);

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

document.addEventListener("DOMContentLoaded", () => {

let boton = document.getElementById("crearpdf");

let container = document.getElementById("contenedor");

boton.addEventListener("click", event => {

event.preventDefault();

boton.style.display = "none";

window.print();

}, false);

container.addEventListener("click", event => {

boton.style.display = "initial";

}, false);

}, false);

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.


<div class="col-md-12 text-center mt-5 mb-5 text-center" id="contenedor">

  <a type="button" class="btn btn-success mb-3" id="crearpdf">Crear PDF</a>
  <h1 class="text-center">El “Eng Metrics Dashboard” de Uber Para Medir La Productividad De Sus Ingenieros</h1>
  <img src="https://blog.nubecolectiva.com/wp-content/uploads/2022/10/cimg_destacada_blog_devs-930x360.png" class="img-fluid pb-3">
  <p class="texto"> El pasado Jueves 4 de Agosto de 2022, Uber la popular empresa proovedora de servicios de movilidad realizo el evento All-Hands. Este evento fue presentado por su actual CEO Dara Khosrowshahi (Hasta la fecha de este Post, es su actual CEO, pero en el futuro no sabemos quien tendrá el cargo) y presento datos interesantes y sobre como mide Uber la productividad de sus ingenieros o las tareas de ingenieria en la empresa, en este artículo te contaré sobre El “Eng Metrics Dashboard” de Uber Para Medir La Productividad De Sus Ingeniero... </p> Leer más: <a href="https://blog.nubecolectiva.com/el-eng-metrics-dashboard-de-uber-para-medir-la-productividad-de-sus-ingenieros/" target="_blank">https://blog.nubecolectiva.com/el-eng-metrics-dashboard-de-uber-para-medir-la-productividad-de-sus-ingenieros/</a>

</div>

1

2

3

4

5

6

7

8

9

10

<div class="col-md-12 text-center mt-5 mb-5 text-center" id="contenedor">

<a type="button" class="btn btn-success mb-3" id="crearpdf">Crear PDF</a>

<h1 class="text-center">El “Eng Metrics Dashboard” de Uber Para Medir La Productividad De Sus Ingenieros</h1>

<img src="https://blog.nubecolectiva.com/wp-content/uploads/2022/10/cimg_destacada_blog_devs-930x360.png" class="img-fluid pb-3">

<p class="texto"> El pasado Jueves 4 de Agosto de 2022, Uber la popular empresa proovedora de servicios de movilidad realizo el evento All-Hands. Este evento fue presentado por su actual CEO Dara Khosrowshahi (Hasta la fecha de este Post, es su actual CEO, pero en el futuro no sabemos quien tendrá el cargo) y presento datos interesantes y sobre como mide Uber la productividad de sus ingenieros o las tareas de ingenieria en la empresa, en este artículo te contaré sobre El “Eng Metrics Dashboard” de Uber Para Medir La Productividad De Sus Ingeniero... </p> Leer más: <a href="https://blog.nubecolectiva.com/el-eng-metrics-dashboard-de-uber-para-medir-la-productividad-de-sus-ingenieros/" target="_blank">https://blog.nubecolectiva.com/el-eng-metrics-dashboard-de-uber-para-medir-la-productividad-de-sus-ingenieros/</a>

</div>

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

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.

JavaScript
04-10-2022
24-01-2023
Crear un Post - Eventos Devs - Foro

Todas Nuestras Páginas y Categorías:

Accesorios Dev Agile Android Android Studio Angular Anuncios Apache Cassandra API REST APIs Apple WWDC Arduino Arq. de Software Articulos Axios Backend Bases de Datos Blockchain Bootstrap C# CDNs Chrome Dev Tools Ciberseguridad Cloud Computing CSS DApps Dart Data Mining Data Science (Ciencia de Datos) DevOps Devs Devs Hardware Django Docker Editores de Código Electron JS Entretenimiento Eventos Dev Experimental Firebase Flutter Frontend Game Dev Gin Git GitHub GitOps Google IO GraphQL Hacking Ético HTML 5 Inteligencia Artificial Ionic iOS JAMStack Java JavaScript jQuery Kotlin Kubernetes Laravel Linux Machine Learning Marketing Digital Material Design Micro Frontend MongoDB Móvil MS SQL Server MySQL News NFT Node JS Oracle DB Pentesting PHP PostgreSQL Premium Principal Python Ranking BD Ranking Lenguajes Raspberry Pi React JS React Native Recursos Redis Ruby Ruby on Rails Rust Seguridad SEO Servidores Social Media Socket IO Spring SQL SQLite Stack Overflow Svelte Swift Tailwind CSS Tecnología Tendencias GitHub Testing Tutoriales Tutoriales de Go TypeScript UI Unicode Unity Utilidades UX Vite JS VPS Vue JS Web 3.0 Wordpress

Partners

Somos expertos en programación, desarrollo de software y tecnología.

Blog de Programación y Desarrollo de apps móviles, Python, JavaScript, PHP, IA, nft, blockchain, ciberseguridad, pentesting, ciencia de datos, ml, seo, ux, ui, Gemini AI, ChatGPT, API, Visual Studio Code, POO, tecnología y más.

Utilizamos cookies para proporcionar y mejorar nuestros servicios. Al navegar por nuestro sitio, usted acepta las cookies. Política de Cookies | Política de Privacidad

Redes Sociales (Developers)

Web

Grupo de Facebook

YouTube

Twitch

Instagram

GitHub

Grupo de WhatsApp

Grupo de Telegram

Discord

Slack

Spotify for Podcasters

Podcasts en Spotify

Podcasts en SoundCloud

Apple Podcasts

Open Collectiva

Threads

YouTube Podcasts

Amazon Music for Podcasters

Canal de WhatsApp

Canal de Telegram

Signal

Bluesky

Skype

Patreon

Reddit

Mastodon

Pastebin

Amazon (USA)

Amazon (España)

Tumblr

TikTok

Substack

Redes Sociales (Digital)

YouTube

Grupo de WhatsApp

Grupo de Telegram

Discord

Skype

Twitch