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:
Ahora lo que debemos hacer es instalar pdfmake:
|
1 |
npm i pdfmake |
Creamos un nuevo componente:
|
1 |
ng g c pdf |
Para importar pdfmake en nuestro componente, copiaremos lo siguiente al principio del componente.
|
1 2 3 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
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:
|
1 |
En app.component.html, quitamos todo y ponemos:
|
1 |
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.
Os dejo un video donde lo explico:
Aquí os dejo el ejemplo para descargar.
Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.
Deja una respuesta