Kā konvertēt JSON datus par Excel izklājlapu ar Angular

Kā izstrādātājs jūs katru dienu esat atvērts jauniem izaicinājumiem dažādos projektos, pie kuriem, iespējams, strādājat. Tīmekļa lietojumprogrammām dažreiz ir jāveic daži papildu uzdevumi, lai sasniegtu dažādus mērķus atkarībā no biznesa vai tehniskajām prasībām.

Iespējams, jums vajadzēs apkopot datus no API un apstrādāt tos citā formātā, piemēram, PDF, XML, DOCX vai XLSX.

Šajā rokasgrāmatā jūs uzzināsit, kā pārveidot JSON datus, kas saņemti no API atbildes, labi sakārtotā Excel izklājlapā jūsu Angular lietojumprogrammā.

Kas ir XLSX bibliotēka?

Xlsx bibliotēka ir efektīvs resurss Angular izstrādātājiem, kuri vēlas pārveidot JSON datus no API atbildes glītā Excel izklājlapā. Izmantojot šo moduli, izstrādātāji var ātri lejupielādēt un modificēt JSON datus.

Varat izmantot Xlsx bibliotēku, lai izveidotu atskaites savai komandai vai parādītu datus jaunos veidos. Ja vēlaties ātru un vienkāršu veidu, kā pārvaldīt savus datus JavaScript lietojumprogrammās, šī ir laba iespēja.

Kā konfigurēt XLSX bibliotēku ar leņķisko lietojumprogrammu

Pirms sākat darbu ar Xlsx bibliotēku savā Angular lietojumprogrammā, ir svarīgi, lai jūsu datorā būtu iestatīta Node.js un Angular izstrādes vide. Ja ir instalēts Node.js, Angular ir viegli iestatīt, palaižot npm instalēt -g @angular/cli terminālī.

Izveidojiet jaunu Angular projektu, palaižot ng new [your-angular-app-name] terminālī. Pēc tam pārejiet uz projekta direktoriju, kā parādīts tālāk:

Varat arī palaist vietējās izstrādes serveri, palaižot to ng kalpot --o, kas ļauj pārlūkprogrammā skatīt savu Angular lietojumprogrammu un tajā veiktās izmaiņas.

Pēc Angular lietojumprogrammas iestatīšanas Xlsx bibliotēkas instalēšana ir vienkāršs process, ko varat pabeigt, vienkārši palaižot npm instalēt xlsx --save. Šī komanda instalēs Xlsx bibliotēkas lietošanai nepieciešamās atkarības.

Kā konvertēt JSON datus XLSX formātā leņķiskā formātā

Izmantojot Angular CLI, varat ģenerēt jaunu pakalpojumu, palaižot ng ģenerēt pakalpojumu [pakalpojuma nosaukums] komanda terminālī. Piemēram, šajā gadījumā varat ģenerēt vajadzīgo Excel pakalpojumu, izmantojot ng ģenerēt pakalpojumu ExcelService.

Šis ģenerēt komanda izveidos pakalpojuma failu: ExcelService.service.ts, iekš src/app projekta direktoriju. Fails pēc noklusējuma izskatās šādi:

imports {Injicējams} no@angular/core; 
@Injicējams({ nodrošinātsIn: 'sakne' }) 
eksportētklasēExcelServiceService{
konstruktors() { } 
}

Šis ExcelService fails apstrādās funkcionalitāti datu eksportēšanai Excel formātā. Atjauniniet ExcelService.service.ts failu, lai tas izskatītos kā zemāk redzamais kods:

imports {Injicējams} no@angular/core; 
imports * kā XLSX no'xlsx'; 
konst EXCEL_EXTENSION = ".xlsx"; // Excel faila paplašinājums
@Injicējams({ nodrošinātsIn: 'sakne' }) 
eksportētklasēExcelServiceService{ 
konstruktors () { }
publiskieksportēt uz Excel(elements: jebkurš, faila nosaukums: virkne): nederīgs{
// ģenerējiet darbgrāmatu un pievienojiet darblapu
konst ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet (elements);
konst darbgrāmata: XLSX.WorkBook = XLSX.utils.book_new(); 
// saglabāt failā
 XLSX.utils.book_append_sheet (darbgrāmata, ws, '1. lapa');
 XLSX.writeFile (darbgrāmata, ${fileName}${EXCEL_EXTENSION}); 
 }
}

Iepriekš minētajā kodā jūs importējat Xlsx bibliotēku un izveidot pastāvīgu mainīgo, EXCEL_EXTENSION lai saglabātu Excel faila paplašinājumu.

The eksportēt uz Excel metode pieņem divus parametrus: elements un faila nosaukums. Elementa parametrs apzīmē datus, ko eksportēt uz Excel failu, savukārt faila nosaukums parametrs ir Excel faila nosaukums.

Lai eksportētu datus uz Excel failu, izveidojiet darblapu, izmantojot json_to_sheet Xlsx bibliotēkas metode. Izveidojiet arī darbgrāmatu, izmantojot bibliotēku grāmata_jauna metodi.

Pēc tam pievienojiet darblapu darbgrāmatai ar grāmata_pievienot_lapa metodi un saglabājiet to failā, izmantojot writeFile.

Iepriekš jūs izveidojāt Excel pakalpojumu, lai atvieglotu JSON datu lejupielādi un konvertēšanu uz Excel lapu. Lai izmantotu šo pakalpojumu, jums ir nepieciešams izveidot attiecīgo leņķisko komponentu un importējiet tajā pakalpojuma failu.

imports { ExcelService } no'./excel.service';

Tālāk jums tas jāievada komponenta konstruktorā šādi:

konstruktors(privāts ExcelService: ExcelService) { 
... 
}

Pēc tam varat turpināt ieviest funkciju (eksportētExcel), kur izmantosit eksportēt uz Excel metode JSON eksportēšanai uz Excel. Tālāk redzamais kods parāda, kā to izdarīt.

eksportētExcel(): nederīgs { 
konst fileToExport = šis.apiJsonResponseData.map((preces: jebkura) => { 
atgriezties {
"Lietotāja ID": preces?.userId,
"ID": preces?.id,
"Nosaukums": preces?.title,
"Ķermenis": preces?.body
 } 
 });
šis.excelService.exportToExcel(
 eksportējamais fails,
'jūsu Excel fails-' + jaunsDatums().getTime() + ".xlsx"
 );
}

Iepriekš minētajā kodā esat definējis eksportētExcel veids, kā izsaukt eksportēt uz Excel metode ExcelService. Jaunais mainīgais, eksportējamais fails, saglabā eksportējamos datus. The apiJsonResponseData masīvs satur JSON datus, kas iegūti no API atbildes.

Pēc tam, eksportēt uz Excel metode ExcelService ņem failu Eksportēt un jūsu izvēlētais faila nosaukums. Ievērojiet, kā faila nosaukumam varat pievienot pašreizējo laikspiedolu, lai nodrošinātu, ka tas ir unikāls. Šī metode konvertēs JSON datus un eksportēs tos uz XLSX failu, kuru pēc tam varat priekšskatīt programmā Excel.

Šī funkcija tagad ir pieejama lietošanai jebkurā jūsu Angular lietojumprogrammas daļā, un jūs varat to viegli pievienot kā notikumu apdarinātāju klikšķis notikumu vai izmantojiet to citā piemērotā veidā, pamatojoties uz jūsu prasībām.

Tālāk esošajā attēlā varat redzēt šīs funkcijas izmantošanas piemēru. JSON dati no ārējas API tiek renderēti lapā ar pogu uz Eksportējiet datus programmā Excel:

Kad noklikšķināt uz Eksportējiet datus programmā Excel pogu, jūsu pārlūkprogramma lejupielādēs Excel failu. Kad jūs atveriet XLSX failu, izejas izklājlapas fails izskatās šādi:

Xlsx bibliotēka var darīt daudz vairāk, nekā konvertēt JSON uz Excel formātu. Tā piedāvā stabilu bibliotēku un atbalsta dažādus failu formātus, ar kuriem jūs varētu saskarties biznesā. Apskatiet Xlsx bibliotēkas dokumentācija vietnē npm lai uzzinātu vairāk par to.

Datu konvertēšana no JSON uz Excel izklājlapām leņķiskā formātā

Varat izmantot Xlsx bibliotēku, lai savā tīmekļa lietojumprogrammā viegli manipulētu ar Excel izklājlapām. Šeit veiktās darbības ļauj pārveidot JSON datus no API labi sakārtotā Excel izklājlapā. Varat arī konvertēt Excel datus atpakaļ uz JSON, izmantojot citas bibliotēkas funkcijas.

Labs veids, kā izmantot šo bibliotēku, ir izveidot lietojumprogrammu, kas ģenerē iknedēļas vai mēneša pārskatus no API un kārto tos kā Excel datus.