Förvandla dina data med lätthet genom att följa denna korta och enkla guide.

Som utvecklare är du öppen för att möta nya utmaningar dagligen i olika projekt du kanske arbetar med. Webbapplikationer måste ibland utföra några extra uppgifter för att uppnå olika mål beroende på affärsmässiga eller tekniska krav.

Du kan behöva samla in data från ett API och bearbeta det i ett annat format som PDF, XML, DOCX eller XLSX.

I den här guiden kommer du att lära dig hur du omvandlar JSON-data som tas emot från ett API-svar till ett välorganiserat Excel-kalkylblad i din Angular-applikation.

Vad är XLSX-biblioteket?

Xlsx-biblioteket är en effektiv resurs för Angular-utvecklare som vill omvandla JSON-data från ett API-svar till ett snyggt Excel-kalkylblad. Genom att använda den här modulen kan utvecklare snabbt ladda ner och ändra JSON-data.

Du kan använda Xlsx-biblioteket för att skapa rapporter för ditt team eller för att presentera data på nya sätt. Om du vill ha ett snabbt och enkelt sätt att hantera dina data i JavaScript-applikationer är detta ett bra alternativ.

instagram viewer

Hur man konfigurerar XLSX-biblioteket med en vinkelapplikation

Innan du börjar med Xlsx-biblioteket i din Angular-applikation är det viktigt att ha en utvecklingsmiljö för Node.js och Angular inställd på din maskin. Med Node.js installerat är Angular lätt att ställa in genom att köra npm installera -g @angular/cli i en terminal.

Skapa ett nytt Angular-projekt genom att köra ng ny [ditt-vinklade-app-namn] i terminalen. Navigera sedan in i projektkatalogen enligt nedan:

Du kan också starta en lokal utvecklingsserver genom att köra ng servera --o, vilket gör att du kan se din Angular-applikation och ändringar som gjorts i den live i webbläsaren.

Efter att ha ställt in en Angular-applikation är installationen av Xlsx Library en enkel process som du kan slutföra helt enkelt genom att köra npm installera xlsx --save. Detta kommando kommer att installera de beroenden som behövs för att använda Xlsx-biblioteket.

Hur man konverterar JSON-data till XLSX-format i Angular

Med Angular CLI kan du generera en ny tjänst genom att köra ng generera tjänst [tjänstnamn] kommandot i terminalen. I det här fallet kan du till exempel skapa den Excel-tjänst du behöver använda ng generera tjänsten ExcelService.

Detta generera kommandot kommer att skapa tjänstefilen: ExcelService.service.ts, i src/app katalog över projektet. Filen ser ut så här som standard:

importera { Injicerbar } från'@angular/core'; 
@Injicerbar({ givenIn: 'rot' }) 
exporteraklassExcelServiceService{
konstruktör() { } 
}

Detta ExcelService filen kommer att hantera funktionaliteten för att exportera data till Excel-format. Uppdatera ExcelService.service.ts filen så att den ser ut som koden nedan:

importera { Injicerbar } från'@angular/core'; 
importera * som XLSX från'xlsx'; 
konst EXCEL_EXTENSION = '.xlsx'; // excel filtillägg


@Injicerbar({ givenIn: 'rot' }) 


exporteraklassExcelServiceService{ 
konstruktör () { }


offentligexportera till Excel(element: valfri, filnamn: sträng): tomhet{
// generera arbetsbok och lägg till kalkylbladet
konst ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet (element);
konst arbetsbok: XLSX.WorkBook = XLSX.utils.book_new(); 
// spara till fil
 XLSX.utils.book_append_sheet (arbetsbok, ws, 'Sheet1');
 XLSX.writeFile (arbetsbok, ${fileName}${EXCEL_EXTENSION}); 
 }
}

I koden ovan importerar du Xlsx bibliotek och skapa en konstant variabel, EXCEL_EXTENSION för att lagra Excel-filtillägget.

De exportera till Excel Metoden accepterar två parametrar: element och filnamn. Elementparametern representerar data som ska exporteras till Excel-filen, medan filnamn parameter är namnet på Excel-filen.

För att exportera data till Excel-filen, skapa ett kalkylblad med hjälp av json_to_sheet metod för Xlsx-biblioteket. Skapa också en arbetsbok med hjälp av bibliotekets bok_ny metod.

Lägg sedan till kalkylbladet i arbetsboken med book_append_sheet metod och spara till en fil med hjälp av skrivFil.

Tidigare skapade du en Excel-tjänst för att underlätta processen att ladda ner och konvertera JSON-data till ett Excel-ark. För att använda den här tjänsten måste du skapa den relevanta Angular-komponenten och importera tjänstfilen till den.

importera { ExcelService } från'./excel.service';

Därefter måste du injicera det i konstruktören av komponenten så här:

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

Sedan kan du gå vidare med att implementera funktionen (exportExcel) där du kommer att använda exportera till Excel metod för att exportera JSON till Excel. Koden nedan visar hur du gör detta.

exportExcel(): tomhet { 
konst fileToExport = detta.apiJsonResponseData.map((föremål: alla) => { 
lämna tillbaka {
"Användar ID": items?.userId,
"Id": objekt?.id,
"Titel": objekt?.title,
"Kropp": föremål?.kropp
 } 
 });
detta.excelService.exportera till Excel(
 fileToExport,
'din Excelfil-' + nyDatum().getTime() + '.xlsx'
 );
}

I koden ovan har du definierat exportExcel metod att anropa exportera till Excel metod för ExcelService. Den nya variabeln, fileToExport, lagrar data för export. De apiJsonResponseData arrayen innehåller JSON-data som erhållits från API-svaret.

Därefter har exportera till Excel metod för excelService tar fileToExport och du föredrar filnamn. Lägg märke till hur du kan lägga till den aktuella tidsstämpeln till filnamnet för att säkerställa att det är unikt. Denna metod kommer att konvertera JSON-data och exportera den till en XLSX-fil som du sedan kan förhandsgranska i Excel.

Den här funktionen är nu tillgänglig att använda i alla delar av din Angular-applikation, och du kan enkelt lägga till den som en händelsehanterare för en klick evenemang eller använda det på något annat lämpligt sätt baserat på dina krav.

Du kan se ett exempel på användning av denna funktion i bilden nedan. JSON-data från ett externt API renderas på sidan, med en knapp för att Exportera data till Excel:

När du klickar på Exportera data till Excel knappen kommer din webbläsare att ladda ner Excel-filen. När du öppna XLSX-filen, kalkylarksfilen för utdata ser ut så här:

Xlsx-biblioteket kan göra mycket mer än att konvertera JSON till Excel-format. Det erbjuder ett robust bibliotek och stöder olika filformat som du kan stöta på i affärer. Kolla in Xlsx-bibliotekets dokumentation om npm för att ta reda på mer om det.

Konvertera data från JSON till Excel-kalkylblad i Angular

Du kan använda Xlsx-biblioteket för att enkelt manipulera Excel-kalkylblad i din webbapplikation. De steg du har utfört här låter dig omvandla JSON-data från ett API till ett välorganiserat Excel-kalkylblad. Du kan också konvertera Excel-data tillbaka till JSON med hjälp av andra funktioner i biblioteket.

Ett bra sätt att öva på att använda det här biblioteket är att bygga en applikation som genererar vecko- eller månadsrapporter från ett API och organiserar dem som Excel-data.