U ovom ću blog postu pokazati kako kreirati PDF dokument unutar Angular web aplikacije koristeći pdfmake.
Što je pdfmake?
pdfmake je biblioteka temeljena na JavaScriptu koja omogućava kreiranje PDF dokumenata iz JSON-a. Može se koristiti na serverskoj npm install pdfmake i klijentskoj bower install pdfmake strani.
Osobno, više sam za NPM nego za Bower. Razloga je nekoliko.
Kreiranje Angular projekta
Koristeći Angular CLI pokrećem novi projekt
1 2 |
$ ng new AngularPdfMAke $ ng serve |
Nakon što sam pokrenuo web aplikaciju u web pregledniku i uvjerio se da sam sve ispravno postavio mogu krenuti u instalaciju pdfmake biblioteke.
pdfmake implementacija
1 |
$ npm install pdfmake |
Nakon instalacije uvozim pdfmake u komponentu unutar koje želim kreirati PDF.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import { Component } from '@angular/core'; var pdfMake = require('pdfmake/build/pdfmake.js'); var pdfFonts = require('pdfmake/build/vfs_fonts.js'); pdfMake.vfs = pdfFonts.pdfMake.vfs; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { ... |
Što se vidljivog dijela aplikacije tiče ondje će se u ovom primjeru nalaziti samo tri gumba, po jedan za otvaranje, preuzimanje i ispis PDF-a.
1 2 3 4 5 6 7 8 9 10 |
<!--The content below is only a placeholder and can be replaced.--> <div style="text-align:center"> <h1> Angular & pdfmake - kreiranje PDF-a </h1> <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="> </div> <div class="button"> <button (click)="open()">Open</button> - <button (click)="download()">Download</button> - <button (click)="print()">Print</button> </div> |
Kreiranje PDF-a moguće je na tri načina:
1.) Otvara PDF u novom tabu web preglednika.
1 |
pdfMake.createPdf(this.docDefinition).open(); |
2.) Otvara prozor za ispis.
1 |
pdfMake.createPdf(this.docDefinition).print(); |
3.) Preuzimanje PDF-a na računalo. U ovom je slučaju moguće unaprijed odrediti naziv PDF-a.
1 |
pdfMake.createPdf(this.docDefinition).download('exampleDocument.pdf'); |
Kao što se vidi iz gore navedenih funkcija sadržaj od kojega se kreira PDF dobije se iz objekta this.docDefinition koji u ovom konkretnom primjeru izgleda ovako:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
this.docDefinition = { content: [ { text: 'Ovo je naslov', style: 'header' }, 'Primjer sadržaja bez dodatnog uređivanja.', { text: 'Poravnato desno.', style: 'anotherStyle' }, { text: 'Kombinacija više stilova.', style: [ 'header', 'anotherStyle' ] } ], styles: { header: { fontSize: 22, bold: true }, anotherStyle: { italics: true, alignment: 'right' } } }; |
Više primjera moguće je pronaći na poveznici http://pdfmake.org/playground.html
Osim toga, tražio sam popis mogućih CSS stilova i za sada sam pronašao poveznicu https://stackoverflow.com/a/32805835/5059916 na kojoj se spominje nekoliko njih.
Zaključak
pdfmake omogućava brzo i jednostavno kreiranje PDF-a unutar Angular aplikacije.
I za kraj, u nastavku dajem strukturu projekta prema package.json datoteci.
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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
{ "name": "angular-pdf-make", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build --prod", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "^5.2.0", "@angular/common": "^5.2.0", "@angular/compiler": "^5.2.0", "@angular/core": "^5.2.0", "@angular/forms": "^5.2.0", "@angular/http": "^5.2.0", "@angular/platform-browser": "^5.2.0", "@angular/platform-browser-dynamic": "^5.2.0", "@angular/router": "^5.2.0", "core-js": "^2.4.1", "pdfmake": "^0.1.35", "rxjs": "^5.5.6", "zone.js": "^0.8.19" }, "devDependencies": { "@angular/cli": "1.6.6", "@angular/compiler-cli": "^5.2.0", "@angular/language-service": "^5.2.0", "@types/jasmine": "~2.8.3", "@types/jasminewd2": "~2.0.2", "@types/node": "~6.0.60", "codelyzer": "^4.0.1", "jasmine-core": "~2.8.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~2.0.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "^1.2.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.1.2", "ts-node": "~4.1.0", "tslint": "~5.9.1", "typescript": "~2.5.3" } } |