Como crear un PDF en Angular con PdfMake

Hola a todos, hoy os voy a explicar como podemos crear un PDF con la biblioteca PdFMake en Angular.

Crear pdfs es mucho más sencillo con PdfMake, una biblioteca para la creación de pdfs desde la parte cliente de Angular.

Aquí te dejo la documentación oficial.

Creamos nuestro proyecto:

Crear y ejecutar un proyecto angular

Ahora lo que debemos hacer es instalar pdfmake:

$ npm i pdfmake

Creamos un nuevo componente:

$ ng g c pdf

Para importar pdfmake en nuestro componente, copiaremos lo siguiente al principio del componente.


import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
pdfMake.vfs = pdfFonts.pdfMake.vfs;

Sino lo hacemos nos dará fallo al hacer el pdf.

En nuestro componente, en la parte typescript:


import { Component, OnInit } from '@angular/core';
import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
pdfMake.vfs = pdfFonts.pdfMake.vfs;

@Component({
  selector: 'app-pdf',
  templateUrl: './pdf.component.html',
  styleUrls: ['./pdf.component.css']
})
export class PdfComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  createPDF(){

    const pdfDefinition: any = {
      content: [
        {
          text: 'Hola mundo',
        }
      ]
    }

    const pdf = pdfMake.createPdf(pdfDefinition);
    pdf.open();

  }

}

Y en el HTML, tendremos un botón para abrir el pdf:

<button (click)="createPDF()">Crear PDF</button>

En app.component.html, quitamos todo y ponemos:


<app-pdf></app-pdf>

Arrancamos con npm start y esto es lo que veremos:

Al pulsar en el botón, se abrirá el pdf:

Si queremos descargar el pdf, en lugar de usar la función open, usaremos la función download.

En posteriores manuales, seguiremos viendo más cosas de pdfmake.

Aquí os dejo el ejemplo para descargar.

Os dejo un video donde lo explico:

https://youtu.be/YpfLCijrL2c

Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.

Etiquetas

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *