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 sucome 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 acreare pdfin 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.
In questo articolo:
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 chiamalapdfmake, in questa cartella crea un file con estensionehtmle chiamaloindex. 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 alladirettiva <!DOCTYPE html>, questa prima riga non deve mai mancare all’inizio di una pagina html il perché puoi leggerlo direttamente aquesto 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 portalecdnjs.com, cercare ed eventualmente scaricare le librerie che ti occorrono, solo ed esclusivamente daquesto 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 dacdnjs.com, compresa anchevfs-fontsnecessaria 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 javascriptCreaPDF(),agganciata all’evento onclick del pulsante “Crea PDF”.Infatti, tutto quello che devi fare è includere il tuo report all’interno della variabilecontent, e processare il suo contenuto, creando il relativo pdf, con questa istruzione:
var output.CreatePdf = pdfMake.createPdf(dd).open();
Ora, apri il fileindex.html, con il tuo browser predefinito, e clicca sul pulsante “Crea PDF”. In meno di un secondo PDfMake processerà il contenuto della variabilecontent, contenuta all’interno dell’oggettodd, e il tuo primo report in pdf prenderà vita.
Adesso non ti resta che, raggiungere l’indirizzo diPdfMake/PlayGround, dove sono contenuti vari tipi di report che puoi copiare e incollare sostituendo interamente il contenuto della funzioneCreaPdf(), 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 suPdfMake/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.
