Transform dataene dine med letthet ved å følge denne korte og enkle veiledningen.
Som utvikler er du åpen for å møte nye utfordringer daglig i ulike prosjekter du kanskje jobber med. Webapplikasjoner må noen ganger utføre noen ekstra oppgaver for å oppnå ulike mål avhengig av forretningsmessige eller tekniske krav.
Du må kanskje samle inn data fra et API og behandle det i et annet format som PDF, XML, DOCX eller XLSX.
I denne veiledningen lærer du hvordan du transformerer JSON-data mottatt fra et API-svar til et godt organisert Excel-regneark i Angular-applikasjonen din.
Hva er XLSX-biblioteket?
Xlsx-biblioteket er en effektiv ressurs for Angular-utviklere som ønsker å transformere JSON-data fra et API-svar til et pent Excel-regneark. Gjennom bruk av denne modulen kan utviklere raskt laste ned og endre JSON-data.
Du kan bruke Xlsx-biblioteket til å lage rapporter for teamet ditt eller presentere data på nye måter. Hvis du vil ha en rask og enkel måte å administrere dataene dine i JavaScript-applikasjoner på, er dette et godt alternativ.
Hvordan konfigurere XLSX-biblioteket med en vinkelapplikasjon
Før du begynner med Xlsx-biblioteket i Angular-applikasjonen din, er det viktig å ha et Node.js- og Angular-utviklingsmiljø satt opp på maskinen din. Med Node.js installert er Angular enkelt å sette opp ved å kjøre npm install -g @angular/cli i en terminal.
Opprett et nytt Angular-prosjekt ved å kjøre ng nytt [ditt-kantede-app-navn] i terminalen. Naviger deretter inn i prosjektkatalogen som vist nedenfor:
Du kan også starte en lokal utviklingsserver ved å kjøre ng server --o, som lar deg se Angular-applikasjonen din og endringer som er gjort i den live i nettleseren.
Etter å ha satt opp en Angular-applikasjon, er installering av Xlsx Library en enkel prosess som du kan fullføre ganske enkelt ved å kjøre npm installer xlsx --save. Denne kommandoen vil installere avhengighetene som trengs for å bruke Xlsx-biblioteket.
Hvordan konvertere JSON-data til XLSX-format i Angular
Med Angular CLI kan du generere en ny tjeneste ved å kjøre ng generere tjeneste [tjenestenavn] kommando i terminalen. I dette tilfellet kan du for eksempel generere Excel-tjenesten du trenger å bruke ng generere tjeneste ExcelService.
Dette generere kommandoen vil opprette tjenestefilen: ExcelService.service.ts, i src/app katalog over prosjektet. Filen ser slik ut som standard:
import { Injiserbar } fra'@angular/core';@Injiserbar({ providedIn: 'rot' })
eksportklasseExcelServiceService{
konstruktør() { }
}
Dette ExcelService filen vil håndtere funksjonaliteten for å eksportere data til Excel-format. Oppdater ExcelService.service.ts fil for å se ut som koden nedenfor:
import { Injiserbar } fra'@angular/core';
import * som XLSX fra'xlsx';konst EXCEL_EXTENSION = '.xlsx'; // excel filtype
@Injiserbar({ providedIn: 'rot' })
eksportklasseExcelServiceService{
konstruktør () { }offentligEksporter til Excel(element: hvilken som helst, filnavn: streng): tomrom{
// generer arbeidsbok og legg til regnearket
konst ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet (element);
konst arbeidsbok: XLSX.WorkBook = XLSX.utils.book_new();
// lagre til fil
XLSX.utils.book_append_sheet (arbeidsbok, ws, 'Ark1');
XLSX.writeFile (arbeidsbok, ${fileName}${EXCEL_EXTENSION});
}
}
I koden ovenfor importerer du Xlsx bibliotek og lage en konstant variabel, EXCEL_EXTENSION for å lagre Excel-filtypen.
De Eksporter til Excel metoden aksepterer to parametere: element og filnavn. Elementparameteren representerer dataene som skal eksporteres til Excel-filen, mens filnavn parameter er navnet på Excel-filen.
For å eksportere dataene til Excel-filen, lag et regneark ved å bruke json_to_sheet metoden til Xlsx-biblioteket. Lag også en arbeidsbok ved hjelp av bibliotekets bok_ny metode.
Deretter legger du til regnearket i arbeidsboken med book_append_sheet metoden, og lagre til en fil ved hjelp av skrivefil.
Tidligere opprettet du en Excel-tjeneste for å lette prosessen med å laste ned og konvertere JSON-data til et Excel-ark. For å bruke denne tjenesten må du opprette den relevante Angular-komponenten og importer tjenestefilen til den.
import { ExcelService } fra'./excel.service';
Deretter må du injisere den i konstruktøren av komponenten slik:
konstruktør(privat excelService: ExcelService) {
...
}
Deretter kan du gå videre med å implementere funksjonen (eksportExcel) hvor du vil bruke Eksporter til Excel metode for å eksportere JSON til Excel. Koden nedenfor viser hvordan du gjør dette.
eksportExcel(): tomrom {
konst fileToExport = dette.apiJsonResponseData.map((varer: alle) => {
komme tilbake {
"Bruker-ID": items?.userId,
"Id": elementer?.id,
"Tittel": elementer?.tittel,
"Kropp": elementer?.kropp
}
});
dette.excelService.Eksporter til Excel(
fileToExport,
'yourExcelFile-' + nyDato().getTime() + '.xlsx'
);
}
I koden ovenfor har du definert eksportExcel metode for å kalle Eksporter til Excel metoden for ExcelService. Den nye variabelen, fileToExport, lagrer dataene som skal eksporteres. De apiJsonResponseData array inneholder JSON-data hentet fra API-svaret.
Deretter har Eksporter til Excel metoden for excelService tar fileToExport og din foretrukne filnavn. Legg merke til hvordan du kan legge til gjeldende tidsstempel til filnavnet for å sikre at det er unikt. Denne metoden vil konvertere JSON-dataene og eksportere dem til en XLSX-fil som du deretter kan forhåndsvise i Excel.
Denne funksjonen er nå tilgjengelig for bruk i alle deler av Angular-applikasjonen din, og du kan enkelt legge den til som en hendelsesbehandler for en klikk arrangementet eller bruke det på en annen passende måte basert på dine behov.
Du kan se et eksempel på bruk av denne funksjonaliteten i bildet nedenfor. JSON-data fra en ekstern API gjengir på siden, med en knapp for å Eksporter data til Excel:
Når du klikker på Eksporter data til Excel -knappen vil nettleseren din laste ned Excel-filen. Når du åpne XLSX-filen, ser utdataregnearkfilen slik ut:
Xlsx-biblioteket kan gjøre mye mer enn å konvertere JSON til Excel-format. Det tilbyr et robust bibliotek og støtter ulike filformater som du kan støte på i virksomheten. Sjekk ut Xlsx-bibliotekets dokumentasjon på npm for å finne ut mer om det.
Konvertering av data fra JSON til Excel-regneark i Angular
Du kan bruke Xlsx-biblioteket til å enkelt manipulere Excel-regneark i nettapplikasjonen din. Trinnene du har utført her lar deg transformere JSON-data fra et API til et godt organisert Excel-regneark. Du kan også konvertere Excel-data tilbake til JSON ved å bruke andre funksjoner i biblioteket.
En god måte å øve på å bruke dette biblioteket på er å bygge en applikasjon som genererer ukentlige eller månedlige rapporter fra et API og organiserer dem som Excel-data.