Kako pretvoriti JSON podatke u Excel proračunsku tablicu pomoću Angulara

Kao programer, otvoreni ste za svakodnevno suočavanje s novim izazovima u različitim projektima na kojima možda radite. Web aplikacije ponekad moraju obavljati neke dodatne zadatke kako bi postigle različite ciljeve ovisno o poslovnim ili tehničkim zahtjevima.

Možda ćete morati prikupiti podatke iz API-ja i obraditi ih u drugom formatu kao što je PDF, XML, DOCX ili XLSX.

U ovom vodiču naučit ćete kako transformirati JSON podatke primljene iz API odgovora u dobro organiziranu Excel proračunsku tablicu u vašoj Angular aplikaciji.

Što je XLSX knjižnica?

Xlsx biblioteka učinkovit je resurs za Angular programere koji žele transformirati JSON podatke iz API odgovora u urednu Excel proračunsku tablicu. Korištenjem ovog modula programeri mogu brzo preuzimati i mijenjati JSON podatke.

Možete koristiti Xlsx biblioteku za izradu izvješća za svoj tim ili za predstavljanje podataka na nove načine. Ako želite brz i jednostavan način upravljanja podacima u JavaScript aplikacijama, ovo je dobra opcija.

Kako konfigurirati XLSX biblioteku s Angular aplikacijom

Prije nego što započnete s Xlsx bibliotekom u vašoj Angular aplikaciji, važno je imati Node.js i Angular razvojno okruženje postavljeno na vašem računalu. Uz instaliran Node.js, Angular je lako postaviti pokretanjem npm install -g @angular/cli u terminalu.

Izradite novi Angular projekt pokretanjem ng new [naziv-vaše-angularne-aplikacije] u terminalu. Zatim idite u direktorij projekta kao što je prikazano u nastavku:

Također možete pokrenuti lokalni razvojni poslužitelj pokretanjem služiti --o, koji vam omogućuje pregled vaše Angular aplikacije i promjena koje su u njoj napravljene uživo u pregledniku.

Nakon postavljanja Angular aplikacije, instaliranje Xlsx knjižnice jednostavan je proces koji možete dovršiti jednostavnim pokretanjem npm instaliraj xlsx --spremi. Ova naredba će instalirati ovisnosti potrebne za korištenje Xlsx biblioteke.

Kako pretvoriti JSON podatke u XLSX format u Angularu

Uz Angular CLI, možete generirati novu uslugu pokretanjem ng generiranje usluge [naziv usluge] naredba u terminalu. Na primjer, u ovom slučaju možete generirati Excel uslugu koja vam je potrebna ng generiranje usluge ExcelService.

Ovaj generirati naredba će stvoriti servisnu datoteku: ExcelService.service.ts, u src/aplikacija imenik projekta. Datoteka prema zadanim postavkama izgleda ovako:

uvoz { Injekcioni } iz'@angular/core'; 
@Injekcioni({ providedIn: 'korijen' }) 
izvozrazredaExcelServiceService{
konstruktor() { } 
}

Ovaj ExcelService datoteka će upravljati funkcionalnošću izvoza podataka u Excel format. Ažurirajte ExcelService.service.ts da izgleda kao kod u nastavku:

uvoz { Injekcioni } iz'@angular/core'; 
uvoz * kao XLSX iz'xlsx'; 
konst EXCEL_PROŠIRENJE = '.xlsx'; // ekstenzija datoteke excel
@Injekcioni({ providedIn: 'korijen' }) 
izvozrazredaExcelServiceService{ 
konstruktor () { }
javnostizvoz u Excel(element: bilo koji, naziv datoteke: niz): poništiti{
// generirajte radnu knjigu i dodajte radni list
konst ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet (element);
konst radna knjiga: XLSX.WorkBook = XLSX.utils.book_new(); 
// spremi u datoteku
 XLSX.utils.book_append_sheet (radna knjiga, ws, 'Sheet1');
 XLSX.writeFile (radna knjiga, ${fileName}${EXCEL_EXTENSION}); 
 }
}

U gornjem kodu uvozite Xlsx biblioteku i stvoriti konstantnu varijablu, EXCEL_PROŠIRENJE za pohranu ekstenzije Excel datoteke.

The izvoz u Excel metoda prihvaća dva parametra: element i naziv datoteke. Parametar elementa predstavlja podatke za izvoz u Excel datoteku, dok naziv datoteke parametar je naziv Excel datoteke.

Za izvoz podataka u Excel datoteku izradite radni list pomoću json_na_list metoda biblioteke Xlsx. Također izradite radnu knjigu pomoću biblioteke knjiga_nova metoda.

Zatim dodajte radni list u radnu knjigu s knjiga_prilog_list način i spremite u datoteku pomoću writeFile.

Ranije ste stvorili uslugu Excel za olakšavanje procesa preuzimanja i pretvaranja JSON podataka u Excel tablicu. Da biste koristili ovu uslugu, trebate stvoriti relevantnu Angular komponentu i u njega uvesti servisnu datoteku.

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

Zatim ga morate ubaciti u konstruktor komponente ovako:

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

Zatim možete nastaviti s implementacijom funkcije (izvoz u Excel) gdje ćete koristiti izvoz u Excel metoda za izvoz JSON-a u Excel. Kôd ispod pokazuje kako se to radi.

izvozExcel(): poništiti { 
konst fileToExport = ovaj.apiJsonResponseData.map((predmeti: bilo koji) => { 
povratak {
"Korisnički ID": stavke?.userId,
"Iskaznica": stavke?.id,
"Titula": stavke?.naslov,
"Tijelo": predmeti?.tijelo
 } 
 });
ovaj.excelService.exportToExcel(
 fileToExport,
'yourExcelFile-' + noviDatum().getTime() + '.xlsx'
 );
}

U gornjem kodu definirali ste izvoz u Excel metoda za pozivanje izvoz u Excel metoda ExcelService. Nova varijabla, fileToExport, pohranjuje podatke za izvoz. The apiJsonResponseData polje sadrži JSON podatke dobivene iz API odgovora.

Nakon toga, izvoz u Excel metoda excelService uzima fileToExport i željeni naziv datoteke. Primijetite kako nazivu datoteke možete dodati trenutnu vremensku oznaku kako biste bili sigurni da je jedinstven. Ova će metoda pretvoriti JSON podatke i izvesti ih u XLSX datoteku koju zatim možete pregledati u Excelu.

Ova je funkcija sada dostupna za korištenje u bilo kojem dijelu vaše Angular aplikacije, a možete je jednostavno dodati kao rukovatelj događajima za klik događaja ili ga upotrijebite na bilo koji drugi prikladan način na temelju vaših zahtjeva.

Na slici ispod možete vidjeti primjer korištenja ove funkcije. JSON podaci iz vanjskog API-ja prikazuju se na stranici, s gumbom za Izvoz podataka u Excel:

Kada kliknete na Izvoz podataka u Excel Vaš će preglednik preuzeti Excel datoteku. Kada ti otvorite XLSX datoteku, izlazna datoteka proračunske tablice izgleda ovako:

Knjižnica Xlsx može učiniti mnogo više od pretvaranja JSON u Excel format. Nudi robusnu biblioteku i podržava različite formate datoteka s kojima se možete susresti u poslu. Provjerite Dokumentacija knjižnice Xlsx o npm-u da saznate više o tome.

Pretvaranje podataka iz JSON u Excel proračunske tablice u Angularu

Možete koristiti Xlsx biblioteku za jednostavno rukovanje Excel proračunskim tablicama u svojoj web aplikaciji. Koraci koje ste ovdje poduzeli omogućuju vam transformaciju JSON podataka iz API-ja u dobro organiziranu Excel proračunsku tablicu. Također možete pretvoriti Excel podatke natrag u JSON pomoću drugih funkcija u biblioteci.

Dobar način vježbanja korištenja ove biblioteke je izrada aplikacije koja generira tjedna ili mjesečna izvješća iz API-ja i organizira ih kao Excel podatke.