Sådan konverteres JSON-data til et Excel-regneark med Angular

Som udvikler er du åben for dagligt at møde nye udfordringer i forskellige projekter, du måtte arbejde på. Webapplikationer skal nogle gange udføre nogle ekstra opgaver for at nå forskellige mål afhængigt af forretningsmæssige eller tekniske krav.

Du skal muligvis indsamle data fra en API og behandle dem i et andet format, såsom PDF, XML, DOCX eller XLSX.

I denne vejledning lærer du, hvordan du transformerer JSON-data modtaget fra et API-svar til et velorganiseret Excel-regneark i din Angular-applikation.

Hvad er XLSX-biblioteket?

Xlsx-biblioteket er en effektiv ressource for Angular-udviklere, der ønsker at transformere JSON-data fra et API-svar til et pænt Excel-regneark. Ved at bruge dette modul kan udviklere hurtigt downloade og ændre JSON-data.

Du kan bruge Xlsx-biblioteket til at oprette rapporter til dit team eller til at præsentere data på nye måder. Hvis du vil have en hurtig og nem måde at administrere dine data i JavaScript-applikationer på, er dette en god mulighed.

Sådan konfigureres XLSX-biblioteket med en vinkelapplikation

Før du går i gang med Xlsx-biblioteket i din Angular-applikation, er det vigtigt at have et Node.js- og Angular-udviklingsmiljø opsat på din maskine. Med Node.js installeret er Angular let at konfigurere ved at køre npm installer -g @angular/cli i en terminal.

Opret et nyt Angular-projekt ved at køre ng ny [dit-kantede-app-navn] i terminalen. Naviger derefter ind i projektbiblioteket som vist nedenfor:

Du kan også starte en lokal udviklingsserver ved at køre ng tjene --o, som giver dig mulighed for at se din Angular-applikation og ændringer, der er foretaget i den, live i browseren.

Når du har konfigureret en Angular-applikation, er installation af Xlsx-biblioteket en simpel proces, som du kan fuldføre blot ved at køre npm installer xlsx --save. Denne kommando vil installere de afhængigheder, der er nødvendige for at bruge Xlsx-biblioteket.

Sådan konverteres JSON-data til XLSX-format i Angular

Med Angular CLI kan du generere en ny service ved at køre ng generere service [tjenestenavn] kommando i terminalen. For eksempel kan du i dette tilfælde generere den Excel-tjeneste, du skal bruge ng generere service ExcelService.

Det her frembringe kommandoen vil oprette servicefilen: ExcelService.service.ts, i src/app bibliotek over projektet. Filen ser som standard sådan ud:

importere { Injicerbar } fra'@angular/kerne'; 
@Injicerbar({ providedIn: 'rod' }) 
eksportklasseExcelServiceService{
konstruktør() { } 
}

Det her ExcelService fil vil håndtere funktionaliteten til at eksportere data til Excel-format. Opdater ExcelService.service.ts fil til at se ud som nedenstående kode:

importere { Injicerbar } fra'@angular/kerne'; 
importere * som XLSX fra'xlsx'; 
konst EXCEL_EXTENSION = '.xlsx'; // excel filtypenavn
@Injicerbar({ providedIn: 'rod' }) 
eksportklasseExcelServiceService{ 
konstruktør () { }
offentligexportToExcel(element: enhver, filnavn: streng): ugyldig{
// generer projektmappe og tilføj regnearket
konst ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet (element);
konst projektmappe: XLSX.WorkBook = XLSX.utils.book_new(); 
// gem til fil
 XLSX.utils.book_append_sheet (projektmappe, ws, 'Sheet1');
 XLSX.writeFile (projektmappe, ${fileName}${EXCEL_EXTENSION}); 
 }
}

I ovenstående kode importerer du Xlsx bibliotek og oprette en konstant variabel, EXCEL_EXTENSION for at gemme Excel-filtypen.

Det exportToExcel metode accepterer to parametre: element og filnavn. Elementparameteren repræsenterer de data, der skal eksporteres til Excel-filen, mens filnavn parameter er navnet på Excel-filen.

For at eksportere dataene til Excel-filen skal du oprette et regneark ved hjælp af json_to_sheet metoden for Xlsx-biblioteket. Lav også en projektmappe ved hjælp af bibliotekets bog_ny metode.

Tilføj derefter regnearket til projektmappen med bog_tilføj_ark metode, og gem den til en fil ved hjælp af skriveFil.

Tidligere oprettede du en Excel-tjeneste for at lette processen med at downloade og konvertere JSON-data til et Excel-ark. For at bruge denne service skal du oprette den relevante Angular-komponent og importer servicefilen til den.

importere { ExcelService } fra'./excel.service';

Dernæst skal du indsprøjte det i konstruktøren af ​​komponenten sådan her:

konstruktør(privat excelService: ExcelService) { 
... 
}

Så kan du gå videre med at implementere funktionen (eksportExcel), hvor du vil bruge exportToExcel metode til at eksportere JSON til Excel. Koden nedenfor viser, hvordan du gør dette.

eksportExcel(): ugyldig { 
konst fileToExport = det her.apiJsonResponseData.map((varer: enhver) => { 
Vend tilbage {
"Bruger ID": items?.userId,
"Id": varer?.id,
"Titel": varer?.title,
"Legeme": genstande?.body
 } 
 });
det her.excelService.exportToExcel(
 fileToExport,
'dinExcelFile-' + nyDato().getTime() + '.xlsx'
 );
}

I koden ovenfor har du defineret eksportExcel metode til at kalde exportToExcel metoden til ExcelService. Den nye variabel, fileToExport, gemmer dataene til eksport. Det apiJsonResponseData array indeholder de JSON-data, der er opnået fra API-svaret.

Efterfølgende exportToExcel metoden til excelService tager fileToExport og din foretrukne filnavn. Bemærk, hvordan du kan tilføje det aktuelle tidsstempel til filnavnet for at sikre, at det er unikt. Denne metode vil konvertere JSON-dataene og eksportere dem til en XLSX-fil, som du derefter kan få vist i Excel.

Denne funktion er nu tilgængelig til brug i enhver del af din Angular-applikation, og du kan nemt tilføje den som en hændelseshandler for en klik begivenhed eller bruge den på en anden passende måde baseret på dine krav.

Du kan se et eksempel på brug af denne funktionalitet på billedet nedenfor. JSON-data fra en ekstern API gengives på siden med en knap til Eksporter data til Excel:

Når du klikker på Eksporter data til Excel knappen, vil din browser downloade Excel-filen. Når du Åbn XLSX-filen, ser output-regnearksfilen sådan ud:

Xlsx-biblioteket kan meget mere end at konvertere JSON til Excel-format. Det tilbyder et robust bibliotek og understøtter forskellige filformater, som du kan støde på i erhvervslivet. Tjek ud Xlsx bibliotekets dokumentation om npm at finde ud af mere om det.

Konvertering af data fra JSON til Excel-regneark i Angular

Du kan bruge Xlsx-biblioteket til nemt at manipulere Excel-regneark i din webapplikation. De trin, du har udført her, lader dig transformere JSON-data fra en API til et velorganiseret Excel-regneark. Du kan også konvertere Excel-data tilbage til JSON ved hjælp af andre funktioner i biblioteket.

En god måde at øve sig i at bruge dette bibliotek på er at bygge et program, der genererer ugentlige eller månedlige rapporter fra en API og organiserer dem som Excel-data.