Come convertire i dati JSON in un foglio di calcolo Excel con Angular

In qualità di sviluppatore, sei aperto ad affrontare nuove sfide ogni giorno in diversi progetti su cui potresti lavorare. Le applicazioni Web a volte devono eseguire alcune attività extra per raggiungere obiettivi diversi a seconda dei requisiti aziendali o tecnici.

Potrebbe essere necessario raccogliere dati da un'API ed elaborarli in un formato diverso come PDF, XML, DOCX o XLSX.

In questa guida imparerai come trasformare i dati JSON ricevuti da una risposta API in un foglio di calcolo Excel ben organizzato nella tua applicazione Angular.

Cos'è la libreria XLSX?

La libreria Xlsx è una risorsa efficace per gli sviluppatori Angular che desiderano trasformare i dati JSON da una risposta API in un foglio di calcolo Excel pulito. Attraverso l'uso di questo modulo, gli sviluppatori possono scaricare e modificare rapidamente i dati JSON.

Puoi utilizzare la libreria Xlsx per creare report per il tuo team o per presentare i dati in modi nuovi. Se desideri un modo semplice e veloce per gestire i tuoi dati nelle applicazioni JavaScript, questa è una buona opzione.

Come configurare la libreria XLSX con un'applicazione angolare

Prima di iniziare con la libreria Xlsx nella tua applicazione Angular, è importante disporre di un ambiente di sviluppo Node.js e Angular configurato sulla tua macchina. Con Node.js installato, Angular è facile da configurare eseguendo npm install -g @angular/cli in un terminale.

Crea un nuovo progetto Angular eseguendo ng new [your-angular-app-name] nel terminale. Quindi navigare nella directory del progetto come mostrato di seguito:

Puoi anche avviare un server di sviluppo locale eseguendo ng serve --o, che ti consente di visualizzare la tua applicazione Angular e le modifiche apportate ad essa dal vivo nel browser.

Dopo aver configurato un'applicazione Angular, l'installazione della libreria Xlsx è un processo semplice che puoi completare semplicemente eseguendo npm installa xlsx --save. Questo comando installerà le dipendenze necessarie per utilizzare la libreria Xlsx.

Come convertire i dati JSON in formato XLSX in Angular

Con Angular CLI, puoi generare un nuovo servizio eseguendo il file ng genera servizio [nome servizio] comando nel terminale. Ad esempio, in questo caso, puoi generare il servizio Excel di cui hai bisogno ng genera il servizio ExcelService.

Questo creare comando creerà il file di servizio: ExcelService.service.ts, nel src/app directory del progetto. Il file ha questo aspetto per impostazione predefinita:

importare { Iniettabile } da'@angolare/core'; 
@Iniettabile({ fornitoIn: 'radice' }) 
esportareclasseExcelServiceService{
costruttore() { } 
}

Questo ExcelService file gestirà la funzionalità per esportare i dati in formato Excel. Aggiorna il ExcelService.service.ts file in modo che assomigli al codice seguente:

importare { Iniettabile } da'@angolare/core'; 
importare * COME XLSX da'xlx'; 
cost EXCEL_EXTENSION = '.xlsx'; // estensione del file excel
@Iniettabile({ fornitoIn: 'radice' }) 
esportareclasseExcelServiceService{ 
costruttore () { }
pubblicoesportare in Excel(elemento: qualsiasi, fileName: stringa): vuoto{
// genera la cartella di lavoro e aggiunge il foglio di lavoro
cost ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet (elemento);
cost cartella di lavoro: XLSX.WorkBook = XLSX.utils.book_new(); 
// salva nel file
 XLSX.utils.book_append_sheet (cartella di lavoro, ws, 'Foglio1');
 XLSX.writeFile (cartella di lavoro, ${nomefile}${EXCEL_EXTENSION}); 
 }
}

Nel codice sopra, importi il ​​file Xlsx libreria e creare una variabile costante, EXCEL_ESTENSIONE per memorizzare l'estensione del file Excel.

IL esportare in Excel metodo accetta due parametri: elemento E nome del file. Il parametro element rappresenta i dati da esportare nel file Excel, mentre il nome del file parametro è il nome del file Excel.

Per esportare i dati nel file Excel, creare un foglio di lavoro utilizzando il file json_to_sheet metodo della libreria Xlsx. Crea anche una cartella di lavoro usando la libreria libro_nuovo metodo.

Quindi, aggiungi il foglio di lavoro alla cartella di lavoro con il file book_append_sheet metodo e salvare in un file utilizzando scrivereFile.

In precedenza, hai creato un servizio Excel per facilitare il processo di download e conversione dei dati JSON in un foglio Excel. Per utilizzare questo servizio, è necessario creare il relativo componente angolare e importare il file di servizio in esso.

importare {Servizio Excel} da'./servizio.excel';

Successivamente, devi iniettarlo nel costruttore del componente in questo modo:

costruttore(excelService privato: ExcelService) { 
... 
}

Quindi puoi andare avanti per implementare la funzione (exportExcel) dove utilizzerai il esportare in Excel metodo per esportare JSON in Excel. Il codice seguente mostra come eseguire questa operazione.

esportaExcel(): vuoto { 
cost fileDaEsporta = Questo.apiJsonResponseData.map((articoli: qualsiasi) => { 
ritorno {
"ID utente": elementi?.userId,
"Id": elementi?.id,
"Titolo": elementi?.titolo,
"Corpo": oggetti?.corpo
 } 
 });
Questo.excelService.esportare in Excel(
 file da esportare,
'tuoExcelFile-' + nuovoData().getTime() + '.xlsx'
 );
}

Nel codice sopra, hai definito il file exportExcel metodo per chiamare il esportare in Excel metodo del ExcelService. La nuova variabile file da esportare, memorizza i dati da esportare. IL apiJsonResponseData array contiene i dati JSON ottenuti dalla risposta API.

Successivamente, il esportare in Excel metodo del excelService prende il fileDaEsportare e il tuo preferito nome del file. Nota come puoi aggiungere il timestamp corrente al nome del file per assicurarti che sia univoco. Questo metodo convertirà i dati JSON e li esporterà in un file XLSX che potrai quindi visualizzare in anteprima in Excel.

Questa funzione è ora disponibile per l'uso in qualsiasi parte della tua applicazione Angular e puoi facilmente aggiungerla come gestore di eventi per un clic evento o usarlo in qualsiasi altro modo adatto in base alle tue esigenze.

Puoi vedere un esempio di utilizzo di questa funzionalità nell'immagine qui sotto. I dati JSON di un'API esterna vengono visualizzati nella pagina, con un pulsante per Esporta dati in Excel:

Quando fai clic sul Esporta dati in Excel il tuo browser scaricherà il file Excel. Quando tu apri il file XLSX, il file del foglio di calcolo di output ha il seguente aspetto:

La libreria Xlsx può fare molto di più che convertire JSON in formato Excel. Offre una solida libreria e supporta vari formati di file che potresti incontrare nel mondo degli affari. Dai un'occhiata al La documentazione della libreria Xlsx su npm per saperne di più.

Conversione di dati da JSON a fogli di calcolo Excel in Angular

Puoi utilizzare la libreria Xlsx per manipolare facilmente i fogli di calcolo Excel nella tua applicazione web. I passaggi che hai eseguito qui ti consentono di trasformare i dati JSON da un'API in un foglio di calcolo Excel ben organizzato. Puoi anche riconvertire i dati di Excel in JSON utilizzando altre funzioni nella libreria.

Un buon modo per esercitarsi nell'uso di questa libreria consiste nel creare un'applicazione che generi report settimanali o mensili da un'API e li organizzi come dati Excel.