[Javascript] Crear PDF con jsPDF #1: Hola Mundo!

JsPDF es una libreria Javascript que sirve para crear documentos PDF de una manera facil y muy flexible.

En este articulo les enseñare como crear documentos PDF sencillos usando esta libreria jsPDF que es una de mis librerias favoritas y las uso en algunos de mis sistemas gratis y Pro.

Descargar jsPDF

Para descargar la libreria jsPDF debemos ir a la pagina del autor.

Link: https://parall.ax/products/jspdf

Esta libreria es gratis y la podemos usar sin limites.

Para empezar a utilizar la libreria bastara con incluir el archivo jspdf.min.js que normalmente se encuentra en la carpeta “dist”.

<script src=”jspdf/dist/jspdf.min.js”></script>

Insertamos en el head de nuestro documento HTML y estaremos listos.

Primer Documento PDF

Vamos a crear un primer documento PDF, ahora vamos a agregar el siguiente codigo en el “body” de nuestro documento.

[code language=”html”]

<script>
var pdf = new jsPDF();
pdf.text(20,20,"Hola Mundo!");
pdf.save(‘mipdf.pdf’);
</script>

[/code]

Recargamos la pagina y veremos el siguiente resultado.

El funcionamiento del codigo es muy facil de entender.

En la linea “var pdf = new jsPDF();” creamos una instancia de jsPDF y la primera pagina, tambien la variable pdf nos sirve para seguir agregando “cosas” al PDF.

En la linea “pdf.text(20,20,”Hola Mundo!”);” creamos un parrafo con el texto “Hola Mundo!”, los numeros 20,20 corresponden a la ubicacion (X,Y) del parrafo en el documento.

Los valores X,Y los podemos ir cambiando para mostrar parrafos mas abajo, por ejemplo en el siguiente parrafo, los valores X,Y pueden ser 20,30, donde 20 es el margen de la izquierda y 30 es el margen de arriba.

Y por ultimo la linea “pdf.save(“mipdf.pdf”);” le ordenamos exportar el documento, con el nombre mipdf.pdf.

Con esto ya tenemos listo nuestro primero documento.

Descargar

A continuacion te dejo un link para que descargues el ejemplo completo.

[sociallocker]

Link: http://pintient.com/11227357/jspdf-1

Para descargar debes dar click en la opcion “Saltar Publicidad” en la esquina superior derecha.

Gracias por apoyarme.

[/sociallocker]

Suscribete

Les invito a suscribirte a mi canal y recibir un email cada vez que publique nuevos articulos, proyectos, tutoriales, etc.

Tambien les invito a enviarme una donacion desde $1usd para apoyar mis contenidos y proyectos.