giovedì 3 luglio 2025

TypeScript create file Excel and download

In questo articolo vedremo come creare un file Excel,  ed effettuare il download del file che è stato creato, il tutto con il linguaggio di programmazione TypeScript e Visual Studio Code.

Creazione del progetto

Dopo aver creato un nuovo progetto di tipo Angular con Visual Studio Code, oppure utilizzare un progetto esistente, occorre installare il componente per la gestione Excel, denominato “Xlsx”.
Nella finestra del terminale, digitare il seguente comando:

npm install xlsx

Facciamo click sul pulsante “Invio” o “Enter” della tastiera, in modo che viene avviata l’installazione del componente.
Al termine dell’installazione, occorre installare il supporto completo per il linguaggio TypeScript, di seguito il comando da eseguire nel terminale.

npm install @types/xlsx

A questo punto la creazione e preparazione del progetto è terminata

Stesura del codice

Ora non resta che scrivere il codice per la creazione del file Excel ed effettuare il relativo download.
Aggiungiamo in alto, nella dichiarazione degli “Import” per le varie classi, la dichiarazione di importazione di questo componente, il tutto come riportato qui di seguito.

TypeScript

import * as XLSX from 'xlsx';

 

In questo modo abbiamo aggiunto il riferimento al componente “Excel”.
Si crea una classe denominata “Nominativo”, che avrà tre proprietà, di seguito la dichiarazione della classe sarà usata come fonte dati per il file “Excel”.


TypeScript

export    class Nominativo {

 

public Nome: string;

public Cognome: string='';

public Eta: Date;




constructor(nome: string, cognome: string, eta: Date){

  this.Nome = nome;

  this.Cognome = cognome;

  this.Eta = eta;

 

}



}

 

Questa classe conterrà i dati che saranno visualizzati nel file “Excel”, ma possiamo usare altre modalità di gestione dei dati.
Nell’evento "ngOnInit", si crea un oggetto di questa classe di tipo array, sarà valorizzato con alcuni dati, il tutto come riportato qui di seguito.

TypeScript:

nominativi: Nominativo[] = [];

 this.nominativi.push(new Nominativo('Emanuele', 'Mattei', new Date('12/12/1974')));

  this.nominativi.push(new Nominativo('Luigi', 'Cristaldi', new Date('12/12/1984')));

  this.nominativi.push(new Nominativo('Luca', 'Rossi', new Date('12/12/1954')));

  this.nominativi.push(new Nominativo('Max', 'Bianchi', new Date('12/12/1994')));

 

Ora tramite la classe per la gestione dei file Excel, denominata Worsheet, contenente nel componente XLSX, generiamo il file “Excel” con i dati presenti nell’array dell’oggetto creato in precedenza.

Di seguito il frammento di codice delle suddette operazioni.

 

TypeScript

  // Crea il foglio Excel dal JSON

  const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(this.nominativi);

 // Crea la cartella di lavoro e aggiungi il foglio di lavoro

  const workbook: XLSX.WorkBook = XLSX.utils.book_new();

  XLSX.utils.book_append_sheet(workbook, worksheet, 'Foglio1');

 

  // Scrivi il file Excel

  XLSX.writeFile(workbook, 'file.xlsx');

 

 

Conclusioni

La flessibilità e semplicità del linguaggio di programmazione TypeScript, offre al programmatore strumenti che semplificano e migliorano la stesura del codice e la realizzazione di software, anche di una certa complessità. L’articolo ha voluto illustrare una tecnica di come dotare i nostri progetti della possibilità di esportare i dati in formato Microsoft Excel, il programma di calcolo più diffuso e potente al mondo. 

Nessun commento: