Icono del sitio Blog de Programación y Desarrollo – Nube Colectiva

Generar PDF con Angular JS 5

Demo Github

Angular JS cuenta con muchas características que ayudan mucho al Desarrollo Web, una de estas es la de poder generar PDFs dinámicamente desde un contenido HTML, e incluso puedes manipular el PDF que se va generar para darle una mejor presentación, en este artículo te enseñaremos a como generar un hermoso PDF con imágenes.

imagen: tristatetechnology.com

Desplegando Librerías

Nosotros avalamos el Desarrollo de Software ágil ya que es parte importante en la entrega del producto al cliente, vamos usar 2 librerías para nuestro ejemplo una es HTML2Canvas y jsPDF .

jsPDF

Con esta librería vamos a generar PDFs en nuestra vista Fron, para instalarlo vamos a nuestra consola de comandos y escribimos


HTML2Canvas

Con la anterior librería generamos PDF, pero necesitamos que el PDF se genere desde el contenido que se encuentre en una capa o div HTML de nuestra vista Front, para ello usaremos esta librería que nos facilitará la tarea de renderizar el contenido HTML de nuestra vista, para instalarlo ejecutamos 2 comandos cada uno por separado

Componente

En nuestro componente llamado app.component.ts instanciamos las librerías que hemos instalado en el paso anterior


Ahora vamos a crear 4 variables de contenidos un titulo y 3 imágenes que mostraremos en nuestra vista Front, las imagenes las colocamos dentro de nuestra carpeta assets y dentro de ella otra carpeta llamada img


Ahora nuestra función, muy importante que se ejecutará al ser llamada con un botón que para Generar el PDF desde nuestra vista Front, esta función nos va permitir renderzar imágenes con el atributo allowTaint, también definimos la calidad del PDF que se generará con el atributo scale.


En el método addImage que esta dentro de la función generarPDF, definimos el formato de salida del gráfico PDF de tipo PNG y la ubicación en el PDF del contenido que este con las coordenadas x=7 y en y=20, asi mismo definimos el ancho=195 y el alto=105 del contenido dentro del PDF


Veamos el código completo de nuestro app.component.ts

La Vista

En nuestra vista colocaremos un contenedor en donde están todos los elementos que Angular va a renderizar a PDF, colocamos una capa con el id=”contenido” y un botón que al hacerle click llamará a la función generarPDF() para proceder a renderizar el contenido a PDF

Nota

Para trabajar con comandos NPM es necesario que tengas instalado Node JS, si no lo tienes aún te recomendamos leer nuestro artículo Que es y Como instalar Node JS para que sepas de que trata.

imagen: atharvasystem.com

 

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

 

Salir de la versión móvil