Angular la creazione di un file pdf da una pagina web

In questo articolo vedremo come generare un file pdf contenente le informazioni presenti in una tabella html, il tutto tramite la tecnologia Angular ed il linguaggio di programmazione TypeScript.
La creazione dei file di sola lettura, quali pdf, può tornare utile in alcuni casi quando si devono rilasciare ricevute per esempio, in questo articolo vedremo come  generare un file pdf con le informazioni presenti nella pagina web, il tutto verrà fatto tramite i componenti jspdf e html2canvas che permettono la creazione dei file pdf. 
Utilizzeremo per questo articolo l’ultima versione dell’ambiente Visual Studio Code e la tecnologia Angular 16.
Il file pdf sarà una tabella con due colonne e qualche riga, il tutto come mostrato in figura 1.

Figura 1 – Il file pdf con la tabella

Creazione del progetto

Dopo aver creato un progetto di tipo Angular tramite i comandi del prompt, apriamo la cartella con Visual Studio Code, oppure nel caso che si ha un proprio progetto per i test, usare quello, in questo modo avremo l’ambiente di sviluppo impostato su quel progetto.
Tramite il prompt di Visual Studio Code installiamo i componenti che ci permetteranno di creare il file pdf.
Di seguito il comando per installare il componente jspdf.
npm install jspdf  
Oltre a questo componente dobbiamo anche aggiungere il componente html2canvas, di seguito si riporta il comando per l’installazione del componente.
npm install html2canvas
A questo punto la creazione del progetto è terminata.

Stesura del codice

Ora non resta che scrivere il codice per creare una pagina html con le informazioni che dobbiamo salvare nel file pdf.
In particolare si crea una tabella con n righe, la quale tabella andremo a salvare come file pdf.
Nel file di tipo html scriviamo una tabella con due colonne e con n righe, di default il file quando si crea un progetto Angular è denominato app.component.html .
La tabella con tutte le informazioni si trova all’interno di un DIV, il quale sarà il riferimento per la creazione del file pdf.
Di seguito si riporta il codice HTML delle suddette operazioni.

HTML
<div   id="pdfTabella" #pdfTabella>
 <div>
     <div  >
       <h1 >Titolo Tabella</h1>
     </div>
                 <div >
                     <table >
                         <thead  >
                             <tr>
                                 <th
                                     >
                                     Nome</th>
                                 <th
                                     >
                                    Cognome</th>
                         </thead>
                         <tbody>
                             <tr  >
                                 <td >Emanuele</td>
                                 <td >Mattei</td>
                             </tr>
                             <tr  >
                                 <td  >Luigi</td>
                                 <td  >Cristaldi </td>
                             </tr>
                             <tr  >
                               <td  >Luca</td>
                               <td  >Bianchi </td>
                             </tr>
                             <tr  >
                               <td  >Francy</td>
                               <td  >Natina </td>
                           </tr>
                         </tbody>
                     </table>
                 </div>
 </div>
</div>
<button (click)="creaPDF()">Generate</button>

A questo punto dobbiamo scrivere il codice per la creazione del file pdf, passiamo in visualizzazione codice, in particolare nel file di tipo .ts, che ha lo stesso nome del file html con la differenza dell’estensione. 
In alto dove sono presenti le dichiarazioni, dobbiamo aggiungere quelle dei due componenti.
Di seguito si riporta la dichiarazione dell’aggiunta dei riferimenti dei due componenti.

TypeScript
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { jsPDF } from 'jspdf';
import html2canvas from 'html2canvas';

Nella dichiarazione della classe del componente si crea una variabile che farà riferimento alla tabella html.
Di seguito si riporta la dichiarazione delle suddette operazioni.

TypeScript:
export class AppComponent implements OnInit {
   @ViewChild('pdfTabella') pdfTabella!: ElementRef;

Ora non resta che scrivere il codice per l’evento click del pulsante, in particolare nel momento in cui si fa click il pulsante trasforma la tabella in un file pdf.
Questo avviene tramite le classi del componente jspdf, e tramite la classe html2Canvas.
Di seguito si riporta il codice per la creazione del file pdf, trasformando la tabella in immagine per aggiungerla nel file pdf e salvarla tramite il metodo “save”.

TypeScript:
 public creaPDF(): void {
   html2canvas(this.pdfTabella.nativeElement, { scale: 3 }).then((canvas) => {
     const immagineDaModello = canvas.toDataURL('image/png');
     const fileLarghezza = 400;
     const generatedImageHeight = (canvas.height * fileLarghezza) / canvas.width;
     let PDF = new jsPDF('p', 'mm', 'a4',);
     PDF.addImage(immagineDaModello, 'PNG', 0, 5, fileLarghezza, generatedImageHeight,);
     PDF.html(this.pdfTabella.nativeElement.innerHTML)
     PDF.save('FilePdf.pdf');
   });
 }

Conclusioni

L’articolo ha voluto fornire una delle varie tecniche per la creazione dei file pdf in ambito Angular e TypeScript, trasformando html in immagine.
La gestione dei file pdf può tornare utile in vari casi, ma soprattutto in quei progetti dov’è richiesto il rilascio di documenti di conferma.
La tecnologia Angular con il linguaggio TypeScript, permettono la creazione di progetti anche molto complessi.