Z lahkoto spremenite svoje podatke z upoštevanjem tega kratkega in preprostega vodnika.

Kot razvijalec ste odprti za vsakodnevno soočanje z novimi izzivi v različnih projektih, na katerih morda delate. Spletne aplikacije morajo včasih opraviti nekaj dodatnih nalog za doseganje različnih ciljev, odvisno od poslovnih ali tehničnih zahtev.

Morda boste morali zbrati podatke iz API-ja in jih obdelati v drugi obliki, kot je PDF, XML, DOCX ali XLSX.

V tem priročniku se boste naučili, kako pretvoriti podatke JSON, prejete iz odziva API-ja, v dobro organizirano Excelovo preglednico v vaši aplikaciji Angular.

Kaj je knjižnica XLSX?

Knjižnica Xlsx je učinkovit vir za razvijalce Angular, ki želijo pretvoriti podatke JSON iz odziva API-ja v čisto Excelovo preglednico. Z uporabo tega modula lahko razvijalci hitro prenesejo in spremenijo podatke JSON.

Knjižnico Xlsx lahko uporabite za ustvarjanje poročil za svojo ekipo ali za predstavitev podatkov na nove načine. Če želite hiter in enostaven način za upravljanje podatkov v aplikacijah JavaScript, je to dobra možnost.

instagram viewer

Kako konfigurirati knjižnico XLSX z aplikacijo Angular

Preden začnete uporabljati knjižnico Xlsx v vaši aplikaciji Angular, je pomembno, da imate na svojem računalniku nastavljeno razvojno okolje Node.js in Angular. Z nameščenim Node.js je Angular enostavno nastaviti z zagonom npm namestite -g @angular/cli v terminalu.

Z zagonom ustvarite nov projekt Angular ng novo [ime-vaše-angularne-aplikacije] v terminalu. Nato se pomaknite v imenik projekta, kot je prikazano spodaj:

Lokalni razvojni strežnik lahko zaženete tudi z zagonom ng služi --o, ki vam omogoča ogled vaše aplikacije Angular in njenih sprememb v živo v brskalniku.

Ko ste nastavili aplikacijo Angular, je namestitev knjižnice Xlsx preprost postopek, ki ga lahko dokončate tako, da zaženete npm namestite xlsx --save. Ta ukaz bo namestil odvisnosti, potrebne za uporabo knjižnice Xlsx.

Kako pretvoriti podatke JSON v format XLSX v Angular

Z Angular CLI lahko ustvarite novo storitev tako, da zaženete ng ustvari storitev [ime storitve] ukaz v terminalu. V tem primeru lahko na primer ustvarite storitev Excel, ki jo potrebujete ustvarjanje storitve ExcelService.

to ustvariti ukaz bo ustvaril servisno datoteko: ExcelService.service.ts, v src/app imenik projekta. Datoteka je privzeto videti takole:

uvoz { Za injiciranje } od'@angular/core'; 
@Za injiciranje({ providedIn: 'root' }) 
izvozrazredExcelServiceService{
konstruktor() { } 
}

to ExcelService datoteka bo upravljala s funkcijo izvoza podatkov v format Excel. Posodobite ExcelService.service.ts da bo izgledala kot spodnja koda:

uvoz { Za injiciranje } od'@angular/core'; 
uvoz * kot XLSX od'xlsx'; 
konst EXCEL_EXTENSION = '.xlsx'; // pripona datoteke excel


@Za injiciranje({ providedIn: 'root' }) 


izvozrazredExcelServiceService{ 
konstruktor () { }


javnostiizvoz v Excel(element: kateri koli, ime datoteke: niz): praznina{
// ustvarite delovni zvezek in dodajte delovni list
konst ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet (element);
konst delovni zvezek: XLSX.WorkBook = XLSX.utils.book_new(); 
// shrani v datoteko
 XLSX.utils.book_append_sheet (delovni zvezek, ws, 'Sheet1');
 XLSX.writeFile (delovni zvezek, ${fileName}${EXCEL_EXTENSION}); 
 }
}

V zgornji kodi uvozite Xlsx knjižnico in ustvarite konstantno spremenljivko, EXCEL_EXTENSION za shranjevanje pripone datoteke Excel.

The izvoz v Excel metoda sprejema dva parametra: element in Ime datoteke. Parameter elementa predstavlja podatke za izvoz v Excelovo datoteko, medtem ko parameter Ime datoteke parameter je ime datoteke Excel.

Če želite izvoziti podatke v Excelovo datoteko, ustvarite delovni list z uporabo json_to_sheet metoda knjižnice Xlsx. Ustvarite tudi delovni zvezek z uporabo knjižnice knjiga_novo metoda.

Nato dodajte delovni list v delovni zvezek z knjiga_dodatek_list in shranite v datoteko z uporabo writeFile.

Prej ste ustvarili storitev Excel za olajšanje postopka prenosa in pretvorbe podatkov JSON v list Excel. Če želite uporabljati to storitev, morate ustvarite ustrezno komponento Angular in vanj uvozite servisno datoteko.

uvoz { ExcelService } od'./excel.service';

Nato ga morate vbrizgati v konstruktor komponente tako:

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

Nato lahko nadaljujete z implementacijo funkcije (izvoz Excel), kjer boste uporabili izvoz v Excel način za izvoz JSON v Excel. Spodnja koda prikazuje, kako to storiti.

izvozExcel(): praznina { 
konst fileToExport = to.apiJsonResponseData.map((artikli: katerikoli) => { 
vrnitev {
"Uporabniško ime": predmeti?.userId,
"ID": predmeti?.id,
"Naslov": predmeti?.naslov,
"Telo": predmeti?.telo
 } 
 });
to.excelService.exportToExcel(
 fileToExport,
'yourExcelFile-' + novoDatum().getTime() + '.xlsx'
 );
}

V zgornji kodi ste definirali izvoz Excel način za klic izvoz v Excel metoda ExcelService. Nova spremenljivka, fileToExport, shrani podatke za izvoz. The apiJsonResponseData vsebuje podatke JSON, pridobljene iz odziva API-ja.

Kasneje je izvoz v Excel metoda excelService vzame fileToExport in vašo prednostno Ime datoteke. Upoštevajte, kako lahko imenu datoteke dodate trenutni časovni žig, da zagotovite, da je edinstveno. Ta metoda bo pretvorila podatke JSON in jih izvozila v datoteko XLSX, ki si jo lahko nato ogledate v Excelu.

Ta funkcija je zdaj na voljo za uporabo v katerem koli delu vaše aplikacije Angular in jo lahko enostavno dodate kot obravnavo dogodkov za kliknite dogodek ali ga uporabite na drug ustrezen način glede na vaše potrebe.

Na spodnji sliki si lahko ogledate primer uporabe te funkcije. Podatki JSON iz zunanjega API-ja so upodobljeni na strani z gumbom za Izvoz podatkov v Excel:

Ko kliknete na Izvoz podatkov v Excel gumb bo vaš brskalnik prenesel datoteko Excel. Ko ti odprite datoteko XLSX, je izhodna datoteka preglednice videti takole:

Knjižnica Xlsx lahko naredi veliko več kot pretvori JSON v format Excel. Ponuja robustno knjižnico in podpira različne formate datotek, ki jih lahko srečate v poslu. Oglejte si Dokumentacija knjižnice Xlsx o npm če želite izvedeti več o tem.

Pretvarjanje podatkov iz JSON v preglednice Excel v Angular

S knjižnico Xlsx lahko preprosto upravljate Excelove preglednice v svoji spletni aplikaciji. Koraki, ki ste jih izvedli tukaj, vam omogočajo pretvorbo podatkov JSON iz API-ja v dobro organizirano Excelovo preglednico. Excelove podatke lahko tudi pretvorite nazaj v JSON z drugimi funkcijami v knjižnici.

Dober način za vadbo uporabe te knjižnice je izdelava aplikacije, ki ustvarja tedenska ali mesečna poročila iz API-ja in jih organizira kot Excelove podatke.