Come creare un pdf in html e Javascript con PdfMake
Uno dei problemi da affrontare, durante lo sviluppo di applicazioni web, è quello di come creare un report pdf. Con PdfMake ora si può.
di Antonio Lamorgese
Uno dei problemi da affrontare, durante lo sviluppo di applicazioni web, è quello su come creare un pdf in html, o meglio, creare report per la stampa di modulistica di vario genere, accedendo a informazioni spesso memorizzate su archivi di database.
Fino a non molto tempo fa, progettare report di stampa in pdf, da applicazioni web è stato possibile facendo ricorso a strumenti come, ad esempio, “Jasper Report”. Questo strumento, tra l’altro gratuito e interamente scritto in Java è tutt’ora una vera e propria manna dal cielo per gli sviluppatori Java.
Alla stessa stregua di Jasper Report, uno sviluppatore PHP, può contare su “PHPJasper”, una delle migliori soluzioni per compilare e processare Jasper Report in ambiente PHP.
Questi strumenti, per quanto validi, riescono a creare pdf in html, partendo da una base dati e integrando le istruzioni di produzione del report in una qualunque classe Java o script PHP.
Sia Jasper Report che PHPJasper producono report in pdf da software lato server. Invece a noi, potrebbe essere utile, creare pdf direttamente lato client. Cioè, creare pdf direttamente da Javascript.
L’operazione è possibile oltre che semplice, grazie ad una delle librerie più utilizzate del momento, cioè PdfMake.
In questa guida, ti spiegherò come integrare PdfMake in una pagina HTML e creare PDF nel giro di pochissimi minuti.
Indice del Post...
1. Integrare PdfMake in una pagina HTML
Se stai leggendo questa guida, avrai già creato, in passato, una tua pagina HTML, perciò sai di cosa sto parlando, ad ogni modo visto l’argomento, è bene cominciare sin dall’inizio. Tanto per iniziare ti do una bella notizia, per questo nostro progetto non ci serve un server web. Questo perché PdfMake, è una libreria scritta interamente in puro codice Javascript, e di conseguenza, eseguibile direttamente tramite un normalissimo browser web. L’unica cosa di cui hai bisogno è un buon editor di testi, io ti consiglio vivamente Visual Studio Code, per questo e per i tuoi progetti futuri.
LEGGI ANCHE: Il miglior modo di fare pratica come sviluppatore web.
Procediamo con il nostro progetto e implementiamo tutto quello che è necessario per processare i nostri report con PdfMake. Quindi, crea una nuova cartella sul desktop e chiamala pdfmake, in questa cartella crea un file con estensione html e chiamalo index. Ora, copia e incolla, questo codice all’interno del file index.html appena creato. Se hai fretta puoi scaricare direttamente il progetto cliccando qui.
Attenzione alla direttiva <!DOCTYPE html>, questa prima riga non deve mai mancare all’inizio di una pagina html il perché puoi leggerlo direttamente a questo indirizzo. Abbiamo visto, in precedenza che, PdfMake è una libreria Javascript, pertanto è buona norma, quando devi prelevare librerie Javascript da integrare nella tua pagina html, raggiungere il portale cdnjs.com, cercare ed eventualmente scaricare le librerie che ti occorrono, solo ed esclusivamente da questo portale.
Pertanto, le librerie in questione sono: JQuery e PdfMake. Infatti tra i tag <script></script> sono stati inclusi i link di accesso ad entrambe le librerie, prelevati da cdnjs.com, compresa anche vfs-fonts necessaria a pdfmake per funzionare correttamente.
2. Come processare il tuo PDF con PdfMake
Come hai senz’altro già potuto notare dando un’occhiata al codice, tutto il codice per creare pdf con pdfmake è incluso nella funzione javascript CreaPDF(), agganciata all’evento onclick del pulsante “Crea PDF”. Infatti, tutto quello che devi fare è includere il tuo report all’interno della variabile content, e processare il suo contenuto, creando il relativo pdf, con questa istruzione:
var output.CreatePdf = pdfMake.createPdf(dd).open();
Ora, apri il file index.html, con il tuo browser predefinito, e clicca sul pulsante “Crea PDF”. In meno di un secondo PDfMake processerà il contenuto della variabile content, contenuta all’interno dell’oggetto dd, e il tuo primo report in pdf prenderà vita.
Adesso non ti resta che, raggiungere l’indirizzo di PdfMake/PlayGround, dove sono contenuti vari tipi di report che puoi copiare e incollare sostituendo interamente il contenuto della funzione CreaPdf(), esclusa la riga di codice menzionata sopra, cioè quella che processerà l’intero pdf.
Potrai, così, apprezzare le straordinarie funzionalità di PdfMake e il modo semplice e veloce per creare report in puro codice javascript.
3. Conclusioni
PdfMake, non è l’unica libreria javascript utilizzata per creare pdf lato client, ne esistono di altre, ma a mio avviso è senz’altro la migliore. Se hai avuto modo di provare gli esempi su PdfMake/PlayGround, avrai capito che, con PdfMake potrai realizzare qualunque tipo di report a tuo piacimento.
Ad ogni modo, seguendo questo video, potrai vedere passo-passo la realizzazione di report in pdf in Javascript con PdfMake in pochissimi secondi.
Desideri acquisire nuove competenze?
l'opportunità di acquisire nuove competenze e di
migliorare il tuo curriculum professionale.
Clicca qui per seguire le prime lezioni gratuite online
