Ako previesť údaje JSON na tabuľku Excel pomocou Angular

Ako vývojár ste otvorený denne čeliť novým výzvam v rôznych projektoch, na ktorých možno pracujete. Webové aplikácie niekedy musia vykonávať niektoré úlohy navyše, aby dosiahli rôzne ciele v závislosti od obchodných alebo technických požiadaviek.

Možno budete musieť zhromaždiť údaje z rozhrania API a spracovať ich v inom formáte, ako je PDF, XML, DOCX alebo XLSX.

V tejto príručke sa naučíte, ako transformovať údaje JSON prijaté z odpovede API na dobre organizovanú tabuľku Excel vo vašej aplikácii Angular.

Čo je knižnica XLSX?

Knižnica Xlsx je efektívnym zdrojom pre vývojárov Angular, ktorí chcú transformovať údaje JSON z odpovede API do prehľadnej tabuľky Excel. Pomocou tohto modulu môžu vývojári rýchlo stiahnuť a upraviť údaje JSON.

Knižnicu Xlsx môžete použiť na vytváranie zostáv pre svoj tím alebo na prezentáciu údajov novými spôsobmi. Ak chcete rýchly a jednoduchý spôsob správy údajov v aplikáciách JavaScript, je to dobrá voľba.

Ako nakonfigurovať knižnicu XLSX pomocou aplikácie Angular

Predtým, ako začnete s knižnicou Xlsx vo vašej aplikácii Angular, je dôležité mať na svojom počítači nastavené vývojové prostredie Node.js a Angular. S nainštalovaným Node.js sa Angular jednoducho nastavuje spustením npm install -g @angular/cli v termináli.

Vytvorte nový projekt Angular spustením ng new [your-angular-app-name] v termináli. Potom prejdite do adresára projektu, ako je uvedené nižšie:

Lokálny vývojový server môžete spustiť aj spustením ng slúžiť --o, ktorý vám umožňuje zobraziť vašu aplikáciu Angular a zmeny v nej vykonané naživo v prehliadači.

Po nastavení aplikácie Angular je inštalácia knižnice Xlsx jednoduchý proces, ktorý môžete dokončiť jednoducho spustením npm install xlsx --uložiť. Tento príkaz nainštaluje závislosti potrebné na používanie knižnice Xlsx.

Ako previesť údaje JSON do formátu XLSX v Angular

S Angular CLI môžete vygenerovať novú službu spustením generovať službu [názov služby] príkaz v termináli. V tomto prípade môžete napríklad vygenerovať službu Excel, ktorú potrebujete generovať službu ExcelService.

Toto generovať príkaz vytvorí súbor služby: ExcelService.service.ts, v src/aplikácia adresár projektu. Súbor predvolene vyzerá takto:

importovať { Injekčné } od'@angular/core'; 
@Injekčné({ poskytnuté v: 'root' }) 
exporttriedaSlužba ExcelService{
konštruktér() { } 
}

Toto ExcelService súbor zvládne funkciu exportu údajov do formátu Excel. Aktualizujte ExcelService.service.ts súbor, aby vyzeral ako kód nižšie:

importovať { Injekčné } od'@angular/core'; 
importovať * ako XLSX od'xlsx'; 
konšt EXCEL_EXTENSION = '.xlsx'; // prípona súboru excel
@Injekčné({ poskytnuté v: 'root' }) 
exporttriedaSlužba ExcelService{ 
konštruktér () { }
verejnostiexport do Excelu(prvok: ľubovoľný, názov súboru: reťazec): neplatné{
// vygenerujte zošit a pridajte pracovný hárok
konšt ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet (prvok);
konšt zošit: XLSX.WorkBook = XLSX.utils.book_new(); 
// uložiť do súboru
 XLSX.utils.book_append_sheet (zošit, ws, 'Hárok1');
 XLSX.writeFile (zošit, ${fileName}${EXCEL_EXTENSION}); 
 }
}

Vo vyššie uvedenom kóde importujete súbor Xlsx knižnicu a vytvorte konštantnú premennú, EXCEL_EXTENSION na uloženie prípony súboru Excel.

The export do Excelu metóda akceptuje dva parametre: element a názov súboru. Parameter prvku predstavuje údaje, ktoré sa majú exportovať do súboru Excel, zatiaľ čo názov súboru Parameter je názov súboru programu Excel.

Ak chcete exportovať údaje do súboru Excel, vytvorte pracovný hárok pomocou json_to_sheet metóda knižnice Xlsx. Vytvorte tiež pracovný zošit pomocou knižnice book_new metóda.

Potom pridajte pracovný hárok do zošita s príponou book_append_sheet a uložte ho do súboru pomocou writeFile.

Predtým ste vytvorili službu Excel na uľahčenie procesu sťahovania a konverzie údajov JSON na hárok Excel. Ak chcete používať túto službu, musíte vytvorte príslušný uhlový komponent a importujte doň súbor služby.

importovať { ExcelService } od'./excel.service';

Ďalej ho musíte vložiť do konštruktora komponentu takto:

konštruktér(súkromná služba excelService: ExcelService) { 
... 
}

Potom môžete pokračovať v implementácii funkcie (exportovať Excel), kde budete používať export do Excelu spôsob exportu JSON do Excelu. Nižšie uvedený kód ukazuje, ako to urobiť.

exportExcel(): neplatné { 
konšt fileToExport = toto.apiJsonResponseData.map((položky: akékoľvek) => { 
vrátiť {
"ID používateľa": items?.userId,
"Id": položky?.id,
"titul": položky?.názov,
"telo": predmety?.telo
 } 
 });
toto.excelService.exportToExcel(
 fileToExport,
'váš súbor Excel-' + NovýDátum().getTime() + '.xlsx'
 );
}

Vo vyššie uvedenom kóde ste definovali exportovať Excel spôsob volania export do Excelu metóda ExcelService. Nová premenná, fileToExport, ukladá údaje na export. The apiJsonResponseData pole obsahuje údaje JSON získané z odpovede API.

Následne sa export do Excelu metóda excelService berie fileToExport a vaše preferované názov súboru. Všimnite si, ako môžete k názvu súboru pripojiť aktuálnu časovú pečiatku, aby ste sa uistili, že je jedinečný. Táto metóda skonvertuje údaje JSON a exportuje ich do súboru XLSX, ktorý si potom môžete zobraziť v programe Excel.

Táto funkcia je teraz k dispozícii na použitie v ktorejkoľvek časti vašej aplikácie Angular a môžete ju jednoducho pridať ako obsluhu udalosti pre kliknite udalosť alebo ho použiť iným vhodným spôsobom na základe vašich požiadaviek.

Príklad použitia tejto funkcie môžete vidieť na obrázku nižšie. Údaje JSON z externého rozhrania API sa vykresľujú na stránke pomocou tlačidla Export údajov do Excelu:

Keď kliknete na Export údajov do Excelu tlačidlo, váš prehliadač stiahne súbor Excel. Keď ty otvorte súbor XLSX, výstupný tabuľkový súbor vyzerá takto:

Knižnica Xlsx dokáže oveľa viac, než len previesť JSON do formátu Excel. Ponúka robustnú knižnicu a podporuje rôzne formáty súborov, s ktorými sa môžete stretnúť v podnikaní. Pozrite sa na Dokumentácia knižnice Xlsx na npm aby ste sa o tom dozvedeli viac.

Prevod údajov z JSON do tabuliek Excelu v Angular

Knižnicu Xlsx môžete použiť na jednoduchú manipuláciu s tabuľkami Excel vo vašej webovej aplikácii. Kroky, ktoré ste tu vykonali, vám umožňujú transformovať údaje JSON z rozhrania API do dobre organizovanej tabuľky programu Excel. Údaje programu Excel môžete tiež previesť späť na JSON pomocou iných funkcií v knižnici.

Dobrým spôsobom, ako si precvičiť používanie tejto knižnice, je vytvoriť aplikáciu, ktorá generuje týždenné alebo mesačné správy z rozhrania API a organizuje ich ako údaje programu Excel.