jsPDF: creare PDF tramite Javascript

PDF (Portable Document Format) è uno dei formati digitali più utilizzati al Mondo, potendo contenere una grande varietà di dati, dal plain text alle grafiche, dalle strutture logiche di elementi agli elementi interattivi come annotazioni e campi dei form, livelli, media interattivi ed oggetti tridimensionali. Anche nell’ambiente Web i documenti PDF godono di un’importantissima percentuale di utilizzatori.

Libreria jsPDF

Per questo motivo anche la libreria jsPDF sarà molto apprezzata dagli sviluppatori Web ed in particolare da quelli che necessitano di produrre i suddetti documenti tramite tecnologie Web Client-Side. Lo scopo di jsPDF è proprio questo, grazie anche alla moltitudine di parametri ed impostazioni settabili in fase di configurazione.

Dopo avere effettuato il download dalla pagina ufficiale del progetto, possiamo installarlo sia tramite npm sia attraverso un pratico servizio CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.debug.js" integrity="sha384-THVO/sM0mFD9h7dfSndI6TS0PgAGavwKvB5hAxRRvc0o9cPLohB0wb/PTA7LdUHs" crossorigin="anonymous"></script>

A questo punto possiamo utilizzare il software. Per produrre un semplice documento, che di default avrà un formato corrispondente all’A4 ed utilizza i millimetri come unità di misura, basterà creare un’istanza della classe jsPDF, chiamare il fondamentale metodo text ed infine salvare il documento tramite il metodo “save“:

// creazione istanza
var doc = new jsPDF()
// creazione file
doc.text('Hello world!', 10, 10)
// salvataggio file doc.save('a4.pdf')

Il metodo text permette di digitare contenuto all’interno del file PDF, ed accetta quattro parametri: il primo è una stringa di testo, oppure un array di stringhe che verranno implementate come collezione successiva di righe (le impostazioni sono dichiarabili prima della chiamata). Il secondo ed il terzo parametro rappresentano rispettivamente la distanza del testo dal bordo sinistro della pagina e la distanza del testo dal bordo superiore della pagina. L’ultimo parametro è un oggetto contenente le varie impostazioni dell’operazione.

Approfondimenti su JavaScript PDF

Possiamo trovare direttamente nella home di jsPDF sia una ricchissima documentazione ufficiale che elenca ogni singolo metodo (come quello per l’aggiunta di elementi ed immagini) e proprietà della classe, sia una demo live che possiamo modificare on the fly per testare le potenzialità dello script.

Via jsPDF