Angular - kreiranje PDF-a koristeći pdfMake

Angular & pdfmake – kreiranje PDF-a

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

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

Nakon instalacije uvozim pdfmake u komponentu unutar koje želim kreirati PDF.

Š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.

Angular – kreiranje PDF-a koristeći pdfMake

Kreiranje PDF-a moguće je na tri načina:

1.) Otvara PDF u novom tabu web preglednika.

pdfmake open

2.) Otvara prozor za ispis.

pdfmake print

3.) Preuzimanje PDF-a na računalo. U ovom je slučaju moguće unaprijed odrediti naziv PDF-a.

pdfmak download

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:

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.

Objavio

Tomislav Stanković

Web developer. Uz to bavi se i temama vezanim uz online reputaciju. Google+

Odgovori

Vaša adresa e-pošte neće biti objavljena. Obavezna polja su označena sa *

Ova web-stranica koristi Akismet za zaštitu protiv spama. Saznajte kako se obrađuju podaci komentara.