Generar PDF con Angular JS 5

3 minuto(s)

En esta página:

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.

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


npm install jspdf --save

npm install jspdf --save

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


// Primero ejecutamos este comando
npm install --save html2canvas

// Luego este otro
npm install --save @types/html2canvas

// Primero ejecutamos este comando

npm install --save html2canvas

// Luego este otro

npm install --save @types/html2canvas

Componente

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


import * as jsPDF from 'jspdf';
import * as html2canvas from 'html2canvas';

import * as jsPDF from 'jspdf';

import * as html2canvas from 'html2canvas';

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


export class AppComponent {

  titulo = 'Generar PDF con Angular JS 5';
  imagen1 = 'assets/img/tc.jpg';
  imagen2 = 'assets/img/pm.jpg';
  imagen3 = 'assets/img/al.jpg';

}

export class AppComponent {

titulo = 'Generar PDF con Angular JS 5';

imagen1 = 'assets/img/tc.jpg';

imagen2 = 'assets/img/pm.jpg';

imagen3 = 'assets/img/al.jpg';

}

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.


generarPDF(){
    html2canvas(document.getElementById('contenido'), {
       // Opciones
       allowTaint: true,
       useCORS: false,
       // Calidad del PDF
       scale: 1
    }).then(function(canvas) {
    var img = canvas.toDataURL("image/png");
    var doc = new jsPDF();
    doc.addImage(img,'PNG',7, 20, 195, 105);
    doc.save('postres.pdf');
   });
}

generarPDF(){

html2canvas(document.getElementById('contenido'), {

// Opciones

allowTaint: true,

useCORS: false,

// Calidad del PDF

scale: 1

}).then(function(canvas) {

var img = canvas.toDataURL("image/png");

var doc = new jsPDF();

doc.addImage(img,'PNG',7, 20, 195, 105);

doc.save('postres.pdf');

});

}

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


doc.addImage(img,'PNG',7, 20, 195, 105);

doc.addImage(img,'PNG',7, 20, 195, 105);

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


import { Component } from '@angular/core';
import * as jsPDF from 'jspdf';
import * as html2canvas from 'html2canvas';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

  titulo = 'Generar PDF con Angular JS 5';
  imagen1 = 'assets/img/tc.jpg';
  imagen2 = 'assets/img/pm.jpg';
  imagen3 = 'assets/img/al.jpg';

  	generarPDF(){
	    html2canvas(document.getElementById('contenido'), {
        // Opciones
        allowTaint: true,
        useCORS: false,
        // Calidad del PDF
        scale: 1
      }).then(function(canvas) {
		    var img = canvas.toDataURL("image/png");
		    var doc = new jsPDF();
		    doc.addImage(img,'PNG',7, 20, 195, 105);
		    doc.save('postres.pdf');
	    });
  	}

}

import { Component } from '@angular/core';

import * as jsPDF from 'jspdf';

import * as html2canvas from 'html2canvas';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

titulo = 'Generar PDF con Angular JS 5';

imagen1 = 'assets/img/tc.jpg';

imagen2 = 'assets/img/pm.jpg';

imagen3 = 'assets/img/al.jpg';

generarPDF(){

html2canvas(document.getElementById('contenido'), {

// Opciones

allowTaint: true,

useCORS: false,

// Calidad del PDF

scale: 1

}).then(function(canvas) {

var img = canvas.toDataURL("image/png");

var doc = new jsPDF();

doc.addImage(img,'PNG',7, 20, 195, 105);

doc.save('postres.pdf');

});

}

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


<div class="album py-5" align="center">
        <div class="container" id="contenido">

          <h2>Postres</h2>

          <div class="row">            
            
            <div class="col-md-4">
              <div class="card mb-4 shadow-sm">
                <img src="{{imagen1}}" title="Torta de Chocolate" alt="Torta de Chocolate">
                <div class="card-body">
                  <p class="card-text">Torta de Chocolate</p>
                </div>
              </div>
            </div>
            
            <div class="col-md-4">
              <div class="card mb-4 shadow-sm">
                <img src="{{imagen2}}" title="Pie de Manzana" alt="Pie de Manzana">
                <div class="card-body">
                  <p class="card-text">Pie de Manzana</p>
                </div>
              </div>
            </div>

            <div class="col-md-4">
              <div class="card mb-4 shadow-sm">
                <img src="{{imagen3}}" title="Arroz con Leche" alt="Arroz con Leche">
                <div class="card-body">
                  <p class="card-text">Arroz con Leche</p>
                </div>
              </div>
            </div>

            
          </div>          
          
        </div>

        <button (click)="generarPDF()" class="btn btn-info">Crear PDF</button>

</div>

<h2>Postres</h2>

<p class="card-text">Torta de Chocolate</p>

</div>

<p class="card-text">Pie de Manzana</p>

</div>

<p class="card-text">Arroz con Leche</p>

</div>

<button (click)="generarPDF()" class="btn btn-info">Crear PDF</button>

</div>

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.