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:
Posta un commento