Kuidas teisendada JSON-andmeid nurga abil Exceli arvutustabeliks

Arendajana oled avatud iga päev uutele väljakutsetele erinevates projektides, millega tegeled. Veebirakendused peavad mõnikord täitma mõningaid lisaülesandeid erinevate eesmärkide saavutamiseks, olenevalt ärilistest või tehnilistest nõuetest.

Võimalik, et peate koguma andmeid API-st ja töötlema neid muus vormingus (nt PDF, XML, DOCX või XLSX).

Sellest juhendist saate teada, kuidas muuta API vastusest saadud JSON-andmed oma Angulari rakenduses hästi organiseeritud Exceli arvutustabeliks.

Mis on XLSX raamatukogu?

Xlsx-i teek on tõhus ressurss Angulari arendajatele, kes soovivad API vastusest JSON-andmed muuta puhtaks Exceli arvutustabeliks. Selle mooduli kasutamise kaudu saavad arendajad JSON-andmeid kiiresti alla laadida ja muuta.

Saate kasutada Xlsx teeki oma meeskonna jaoks aruannete loomiseks või andmete esitamiseks uutel viisidel. Kui soovite kiiret ja lihtsat viisi oma andmete haldamiseks JavaScripti rakendustes, on see hea valik.

Kuidas konfigureerida XLSX-i raamatukogu nurgarakendusega

Enne Angulari rakenduses Xlsx teegiga alustamist on oluline, et teie arvutis oleks seadistatud Node.js ja Angular arenduskeskkond. Kui Node.js on installitud, on Angulari käivitamisel lihtne seadistada npm install -g @angular/cli terminalis.

Looge käivitades uus Angular projekt ng new [your-angular-app-name] terminalis. Seejärel navigeerige projekti kataloogi, nagu allpool näha:

Võite käivitada ka kohaliku arendusserveri, käivitades selle ng serveeri --o, mis võimaldab teil oma Angular-rakendust ja selles tehtud muudatusi brauseris reaalajas vaadata.

Pärast rakenduse Angular seadistamist on Xlsx teegi installimine lihtne protsess, mille saate lõpule viia lihtsalt käivitades npm install xlsx --save. See käsk installib Xlsx teegi kasutamiseks vajalikud sõltuvused.

Kuidas teisendada JSON-andmeid XLSX-vormingusse nurgas

Angular CLI abil saate luua uue teenuse, käivitades ng genereerida teenust [teenuse nimi] käsk terminalis. Näiteks saate sel juhul luua vajaliku Exceli teenuse ng genereerida teenust ExcelService.

See genereerida käsk loob teenusefaili: ExcelService.service.ts, aastal src/app projekti kataloog. Vaikimisi näeb fail välja selline:

importida { Süstitav } alates'@angular/core'; 
@Süstitav({ sätestatudIn: "juur" }) 
eksportidaklassExcelServiceService{
konstruktor() { } 
}

See ExcelService fail tegeleb andmete eksportimise funktsiooniga Exceli vormingusse. Värskendage ExcelService.service.ts fail näeb välja nagu allolev kood:

importida { Süstitav } alates'@angular/core'; 
importida * nagu XLSX alates'xlsx'; 
konst EXCEL_EXTENSION = ".xlsx"; // Exceli faililaiend
@Süstitav({ sätestatudIn: "juur" }) 
eksportidaklassExcelServiceService{ 
konstruktor () { }
avalikeksportida Excelisse(element: mis tahes, failinimi: string): tühine{
// looge töövihik ja lisage tööleht
konst ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet (element);
konst töövihik: XLSX.WorkBook = XLSX.utils.book_new(); 
// salvesta faili
 XLSX.utils.book_append_sheet (töövihik, ws, 'leht1');
 XLSX.writeFile (töövihik, ${fileName}${EXCEL_EXTENSION}); 
 }
}

Ülaltoodud koodis impordite Xlsx raamatukogu ja luua konstantne muutuja, EXCEL_EXTENSION Exceli faililaiendi salvestamiseks.

The eksportida Excelisse meetod aktsepteerib kahte parameetrit: element ja faili nimi. Elemendi parameeter tähistab Exceli faili eksporditavaid andmeid, samas kui faili nimi parameeter on Exceli faili nimi.

Andmete eksportimiseks Exceli faili looge tööleht kasutades json_to_sheet Xlsx teegi meetod. Looge raamatukogu abil ka töövihik raamat_uus meetod.

Seejärel lisage tööleht töövihikusse raamatu_lisa_leht meetodit ja salvestage faili kasutades writeFile.

Varem lõite Exceli teenuse, et hõlbustada JSON-andmete allalaadimist ja Exceli lehele teisendamist. Selle teenuse kasutamiseks peate luua vastav nurkkomponent ja importige sellesse teenusefail.

importida { ExcelService } alates'./excel.service';

Järgmisena peate selle komponendi konstruktorisse süstima järgmiselt:

konstruktor(privaatne excelService: ExcelService) { 
... 
}

Seejärel võite jätkata funktsiooni (ekspordiksExcel), kus te kasutate eksportida Excelisse meetod JSON-i eksportimiseks Excelisse. Allolev kood näitab, kuidas seda teha.

eksportExcel(): tühine { 
konst fileToExport = see.apiJsonResponseData.map((esemed: mis tahes) => { 
tagasi {
"Kasutaja ID": items?.userId,
"Id": üksused?.id,
"Pealkiri": esemed?.title,
"Keha": esemed?.keha
 } 
 });
see.excelService.exportToExcel(
 faili eksportida,
"teie Exceli fail-" + uusKuupäev().getTime() + ".xlsx"
 );
}

Ülaltoodud koodis olete määratlenud ekspordiksExcel meetod helistamiseks eksportida Excelisse meetod ExcelService. Uus muutuja, faili eksportida, salvestab eksportimiseks vajalikud andmed. The apiJsonResponseData massiiv sisaldab API vastusest saadud JSON-andmeid.

Järgnevalt, eksportida Excelisse meetod excelService võtab faili Ekspordiks ja teie eelistatud faili nimi. Pange tähele, kuidas saate failinimele lisada praeguse ajatempli, et tagada selle kordumatus. See meetod teisendab JSON-andmed ja ekspordib need XLSX-failiks, mida saate seejärel Excelis eelvaadata.

See funktsioon on nüüd saadaval kasutamiseks teie Angular-rakenduse mis tahes osas ja saate selle hõlpsasti lisada sündmuste töötlejana klõpsa üritusel või kasutage seda mõnel muul sobival viisil vastavalt teie vajadustele.

Selle funktsiooni kasutamise näidet näete alloleval pildil. Välise API JSON-andmed renderdatakse lehel nupuga Andmete eksportimine Excelisse:

Kui klõpsate Andmete eksportimine Excelisse nuppu, laadib brauser Exceli faili alla. Kui sa avage XLSX-fail, näeb väljundarvutustabeli fail välja selline:

Xlsxi teek suudab teha palju enamat kui JSON-i teisendamine Exceli vormingusse. See pakub tugevat teeki ja toetab erinevaid failivorminguid, millega võite äritegevuses kokku puutuda. Tutvuge Xlsx raamatukogu dokumentatsioon npm-is et selle kohta rohkem teada saada.

Andmete teisendamine JSON-ist Exceli arvutustabeliteks nurgas

Saate kasutada Xlsxi teeki, et hõlpsasti oma veebirakenduses Exceli tabeleid töödelda. Siin tehtud toimingud võimaldavad teil API-st JSON-andmed teisendada hästi organiseeritud Exceli arvutustabeliks. Samuti saate Exceli andmed tagasi JSON-i teisendada, kasutades teegi muid funktsioone.

Hea viis selle teegi kasutamise harjutamiseks on luua rakendus, mis genereerib API-st nädala- või kuuaruandeid ja korraldab need Exceli andmetena.