Creare un PDF con JavaScript

Nell'era digitale, la capacità di generare documenti PDF dinamicamente è diventata sempre più importante per le applicazioni web. I PDF sono utilizzati per una vasta gamma di scopi, come la generazione di report, la creazione di fatture, e la stampa di certificati. 

JavaScript, grazie alla sua versatilità e alla vasta gamma di librerie disponibili, permette di generare PDF direttamente dal front-end. In questa guida, esploreremo come creare un PDF utilizzando JavaScript, focalizzandoci sull'uso della libreria jsPDF.

Introduzione a jsPDF

jsPDF è una libreria client-side che permette di generare documenti PDF direttamente nel browser. È scritta interamente in JavaScript e non richiede dipendenze esterne, rendendola una soluzione ideale per l'aggiunta di funzionalità di generazione PDF in applicazioni web.

Prima di poter utilizzare jsPDF, dobbiamo includerlo nel nostro progetto. Possiamo farlo in diversi modi, come aggiungere direttamente lo script tramite un tag <script> che punta al CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>

Oppure, se stai utilizzando un gestore di pacchetti come npm o yarn, puoi installare jsPDF nel tuo progetto:

npm install jspdf
# o
yarn add jspdf

Creazione del primo PDF

Una volta incluso jsPDF nel tuo progetto, sei pronto per generare il tuo primo documento PDF. Ecco un semplice esempio di come fare:

function crea(){
    const doc = new jsPDF();
    
    doc.text("Ciao Mondo!", 10, 10);
    doc.save("ciao-mondo.pdf");
}

Questo script crea un nuovo documento PDF, aggiunge il testo "Ciao Mondo!" a 10 millimetri dall'alto e 10 millimetri dalla sinistra del documento, e infine salva il documento come "ciao-mondo.pdf".

Per poter eseguire il codice possiamo semplicemente aggiungere un pulsante alla nostra pagina:

<button onclick="crea()">Crea PDF</button>

Il pulsante richiama la funzione crea() che contiene il codice javascript per creare un file PDF.

Aggiunta di contenuti complessi

La vera potenza di jsPDF emerge quando si inizia ad aggiungere contenuti più complessi. jsPDF supporta non solo testo, ma anche immagini, grafici e forme.

Per aggiungere un'immagine al PDF, puoi utilizzare il metodo addImage. Questo metodo richiede il percorso dell'immagine, il tipo di formato, e le coordinate dove l'immagine deve essere posizionata:

doc.addImage(urlImmagine, 'JPEG', 15, 40, 180, 160);

Creare una tabella può essere un po' più complesso, dato che jsPDF non ha un metodo integrato per la generazione di tabelle. Tuttavia, è possibile disegnare linee e testo per assemblare una tabella:

// Intestazioni
doc.text("ID", 10, 20);
doc.text("Nome", 50, 20);
doc.text("Email", 90, 20);

// Righe
dati.forEach((item, index) => {
	let posizione = 30 + (10 * index);
	doc.text(item.id.toString(), 10, posizione);
	doc.text(item.nome, 50, posizione);
	doc.text(item.email, 90, posizione);
});

Conclusione

Creare documenti PDF con JavaScript utilizzando jsPDF è un processo relativamente semplice e diretto. Con questa potente libreria, sviluppatori web possono facilmente integrare funzionalità di generazione PDF nelle loro applicazioni, migliorando l'interazione con l'utente e fornendo strumenti utili per la visualizzazione e l'esportazione di dati. Da semplici report a documenti complessi con grafici e immagini, jsPDF offre una vasta gamma di funzionalità per soddisfare le esigenze di qualsiasi progetto.