Angular modificare le proprietà di un file pdf

Si riporta l'articolo scritto per il sito https://www.iprogrammatori.it/articoli/javascript/art_angular-modificare-le-propriet-di-un-file-pdf_1880.aspx

In questo articolo vedremo come modificare alcune proprietà di un file pdf, in particolare il titolo, la descrizione e  le parole chiave.

La versione del Framework Angular è la 16 ma si può applicare anche alle versioni successive, ed il linguaggio di programmazione è il TypeScript.

Creazione del progetto

Si crea un nuovo progetto Angular e si apre con Visual Studio Code, una volta aperto il progetto creato, dobbiamo aggiungere il componente per la gestione dei file pdf il “pdf-lib”, che permette di lavorare sui file pdf.

Dalla finestra del  prompt dei comandi di Visual Studio Code, digitiamo il seguente comando:

npm install pdf-lib

A questo punto verrà installato il componente, il tutto come mostrato in figura 1.

 

 

Figura 1 – L’installazione del componente pdf-lib.

Stesura del codice

Terminata la creazione del codice, iniziamo la stesura del codice, in particolare si crea nella parte html un controllo per la ricerca dei file, mentre nel linguaggio TypeScript scriveremo il codice per la modifica dei file.

Di seguito si riporta il codice html per la ricerca dei file nel computer:

Angular

<div>Modifica file</div>

<br>

<input type="file" id="fileInput" />

 

Ora passiamo nel file .ts, quello riguardante il linguaggio TypeScript.

Aggiungiamo il riferimento alla libreria aggiunta al progetto, in alto, nelle dichiarazioni import, inseriamo il seguente codice:

TypeScript

import { PDFDocument } from 'pdf-lib';

 

Si ricorda che questa riga di codice  si può inserire automaticamente tramite l’editor di Visual Studio Code, una volta selezionata la classe della libreria.

Si crea una funzione che permette il download del file partendo dallo stream dati del file modificato.

Di seguito il frammento di codice delle suddette operazioni.

TypeScript

    downloadPDF(pdfBytes: Uint8Array, fileName: string) {

    const blob = new Blob([pdfBytes], { type: 'application/pdf' });

    const link = document.createElement('a');

    link.href = URL.createObjectURL(blob);

    link.download = fileName;

    link.click();

  }

 

La funzione permette di effettuare il download del file automaticamente senza interazione dell’utente.

Di seguito si riporta la funzione per la modifica del file pdf, impostando, il titolo, l’oggetto, l’autore e le parole chiave il tutto tramite le classi messi a disposizione della libreria che abbiamo precedentemente aggiunto.

Una volta creato il file restituisce lo stream dei dati che verrà scaricato automaticamente.

Di seguito il frammento di codice delle suddette operazioni tramite il linguaggio di programmazione TypeScript.

TypeScript

  async ModificaPDF(pdfBytes: Uint8Array)    {

    const pdfDoc = await  PDFDocument.load(pdfBytes);

 

    pdfDoc.setTitle('Mio titolo');

    pdfDoc.setAuthor('Emanuele ');

    pdfDoc.setSubject('Documento di prova, oggetto');

    pdfDoc.setKeywords(['amministrazione', 'lettera']);

 

    const pdfBytesModified =   pdfDoc.save();

    return pdfBytesModified;

 

  }

 

Siamo giunti alla conclusione dell’articolo, non resta che scrivere il codice che permette di modificare il file e successivamente scaricarlo.

Nell’evento nginit, impostiamo un gestore di evento che al cambiamento della selezione del file selezionato nel computer, lo modifica ed effettua il download.

Qui di seguito il frammento di codice delle suddette operazioni.

TypeScript

 ngOnInit(): void {

 

document.getElementById('fileInput')?.addEventListener('change',

 (event) => {

const input = event.target as HTMLInputElement;

if (input.files && input.files[0]) {

  const file = input.files[0];

  const fileReader = new FileReader();

 

  fileReader.onload = async () => {

  const arrayBuffer = fileReader.result as ArrayBuffer;

  const uint8Array = new Uint8Array(arrayBuffer);

 const pdfBytesModified =  this.ModificaPDF(uint8Array);

 

 this.downloadPDF(await pdfBytesModified, 'NuovoFile.pdf');

               

 };

 

  fileReader.readAsArrayBuffer(file);

      }

});

}

 

 Il file che verrà creato avrà le proprietà modificate come riportato in figura 2.

Figura 2 – Le proprietà del file pdf modificate

Conclusioni

Terminata la stesura del codice non resta che effettuare delle prove selezionando un file di tipo pdf dal proprio pc, una aperta la finestra delle proprietà del file noteremo che alcune proprietà sono state modificate secondo le informazioni che abbiamo impostato.

L’articolo ha voluto fornire al lettore una tecnica di gestione dei file pdf in Angular, un formato di file molto richiesto e che viene utilizzato soprattutto nella gestione documentale.

Il componente visto in questo articolo offre funzionalità che permettono di gestire secondo le proprie esigenze questa tipologia di file.