Creare PDF con Javascript — CodingCreativo

In questo breve tutorial impareremo a creare pdf con JavaScript.

Quello che vi presenterò è uno dei metodi possibili per creare pdf e fa uso della libreria jsPDF, ma chiaramente ci sono altri possibili metodi.

La libreria jsPDF è stata dunque sviluppata con lo scopo di produrre documenti pdf personalizzabili.

Utilizzo della libreria jsPDF per creare pdf con JavaScript

Per utilizzare la libreria jsPDF basta quindi inserire semplicemente questo collegamento.

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

Esempio 1

Se cliccate sul pulsante sotto, vi comparià una finestra con la possibilità di salvare il file pdf di nome codingcreativo.pdf, con all'interno gli elementi specifati con una funzione appositamente creata.

Da zero ad eroe

Entra nel mondo della programmazione web: variabili, funzioni, array, DOM, eventi. Con esercizi pratici e progetti coinvolgenti.

8 ore di corso registrato
Più di 50 algoritmi risolti passo passo
Livello base — da zero ad eroe
100% online, fruibile quando vuoi

Procedimento dell'esempio che utilizza la libreria jsPDF

Un possibile procedimento, per creare pdf con JavaScript, può essere quello spiegato nel tutorial sotto.

Innanzitutto creo la funzione che serve a generare il documento pdf che chiamo ad esempio creaPdf().

Utilizzo il metodo text(), potete trovare la documentazione al seguente link https://www.w3schools.com/jquery/html_text.asp, che serve a scrivere nel nostro documento.

Specifichiamo, nel metodo text(), non solo la stringa di testo da inserire nel documento, ma anche i margini.

Dopo, per creare più pagine in un documento utilizzo il metodo addPage().

Infine per permettere il salvataggio del file utilizzo il metodo save() dove specifico il nome del file pdf.

Ecco di seguito la semplice funzione per creare pdf con JavaScript.

<script type="text/javascript">
function creaPdf() {
	var doc = new jsPDF();
	doc.text(20, 20, 'Benvenuto su Coding Creativo!');
	doc.text(10, 30, 'Ciao a tutti sono un file PDF creato in automatico');
	doc.addPage();
	doc.text(20, 20, 'Questo il contenuto della seconda pagina');
        doc.addPage();
	doc.text(20, 20, 'Questo il contenuto della terza pagina');

	doc.save('codingcreativo.pdf');
}
</script>

Infine creo il pulsante su cui attivare la nostra funzione al registrarsi dell'evento onclick() e lo vado a posizionare dove necessario.

<button onclick ="creaPdf()" type = "button">Crea PDF</button>

Esempio 2

Se cliccate sul pulsante si genera un pdf con una formattazione scelta per i singoli elementi della pagina.

Includiamo sempre la libreria jsPDF e poi modifichiamo la funzione in modo da inserire la formattazione desiderata.

Per creare la formattazione come da esempio, ho utilizzato:

setFont(), per impostare il tipo di carattere, ad esempio Verdana;

setFontType() per impostare il carattere normale, grassetto o corsivo;

setFontSize() per impostare la dimensione del carattere, ad esempio 18;

setTextColor() per impostare il colore, ad esempio setTextColor(255, 0, 0) è il rosso.

Quindi decido di inserire ad esempio questa formattazione:

doc.setFont("Times New Roman");
doc.setFontType("normal");
doc.setFontSize(20);
doc.setTextColor(0, 255, 0);

In questo modo creo un documento pdf settando il colore a verde, il carattere Times New Roman, normale e dimensione 20, cambio poi il colore per il secondo paragrafo.

Notate infatti che per il secondo paragrafo ho impostato il testo nero in questo modo doc.setTextColor(0, 0, 0).

Allego quindi il codice completo della funzione per creare pdf con JavaScript.

<script type="text/javascript">
function creaPdf3() {
	var doc = new jsPDF();
	doc.setFont("Times New Roman");
        doc.setFontType("normal");
        doc.setFontSize(20);
        doc.setTextColor(0, 255, 0);
	doc.text(20, 20, 'Benvenuto su Coding Creativo!');
        doc.setTextColor(0, 0, 0);
	doc.text(20, 30, 'Ciao a tutti son un file PDF creato in automatico');
	doc.addPage();
	doc.text(20, 20, 'Questo il contenuto della seconda pagina');

	// Save the PDF
	doc.save('codingcreativo3.pdf');
}
</script>
<button onclick ="creaPdf3()" type = "button">Crea PDF formattato</button>

Chiaramente questo è solo un esempio di base per creare pdf con JavaScript.

Lezione precedente: rimuovere attributi agli elementi nel DOM JavaScript

Lezione successiva: creare pdf da un form con JavaScript

Alcuni link utili:

Creare elementi nel dom con javascript

Dom in javascript

Come creare una galleria di immagini con javascript

Utilizzare gli array in javascript

Come creare una calcolatrice con javascript

Validare un form con javascript

Saper utilizzare il metodo getElementById

Esempi di Javascript corfirm