Kuinka muuntaa JSON-tiedot Excel-laskentataulukoksi Angularilla

Kehittäjänä olet valmis kohtaamaan uusia haasteita päivittäin erilaisissa projekteissasi. Web-sovellusten on joskus suoritettava joitain ylimääräisiä tehtäviä saavuttaakseen erilaisia ​​tavoitteita liiketoiminnan tai teknisten vaatimusten mukaan.

Sinun on ehkä kerättävä tietoja API: sta ja käsiteltävä ne eri muodossa, kuten PDF, XML, DOCX tai XLSX.

Tässä oppaassa opit muuttamaan API-vastauksesta saadut JSON-tiedot hyvin järjestetyksi Excel-laskentataulukoksi Angular-sovelluksessasi.

Mikä on XLSX-kirjasto?

Xlsx-kirjasto on tehokas resurssi Angular-kehittäjille, jotka haluavat muuntaa JSON-tiedot API-vastauksesta siistiin Excel-laskentataulukkoon. Tämän moduulin avulla kehittäjät voivat nopeasti ladata ja muokata JSON-tietoja.

Xlsx-kirjaston avulla voit luoda raportteja tiimillesi tai esittää tietoja uusilla tavoilla. Jos haluat nopean ja helpon tavan hallita tietojasi JavaScript-sovelluksissa, tämä on hyvä vaihtoehto.

Kuinka määrittää XLSX-kirjasto kulmasovelluksella

Ennen kuin aloitat Xlsx-kirjaston käytön Angular-sovelluksessasi, on tärkeää, että koneellesi on määritetty Node.js- ja Angular-kehitysympäristö. Kun Node.js on asennettu, Angular on helppo määrittää suorittamalla npm install -g @angular/cli terminaalissa.

Luo uusi Angular-projekti suorittamalla ng new [your-angular-app-name] terminaalissa. Siirry sitten projektihakemistoon alla olevan kuvan mukaisesti:

Voit myös käynnistää paikallisen kehityspalvelimen suorittamalla ng palvella --o, jonka avulla voit tarkastella Angular-sovellustasi ja siihen tehtyjä muutoksia livenä selaimessa.

Kun Angular-sovellus on määritetty, Xlsx-kirjaston asentaminen on yksinkertainen prosessi, jonka voit suorittaa yksinkertaisesti suorittamalla npm install xlsx --save. Tämä komento asentaa Xlsx-kirjaston käyttöön tarvittavat riippuvuudet.

Kuinka muuntaa JSON-tiedot XLSX-muotoon Angularissa

Angular CLI: n avulla voit luoda uuden palvelun suorittamalla luo palvelu [palvelun nimi] komento terminaalissa. Esimerkiksi tässä tapauksessa voit luoda tarvitsemasi Excel-palvelun käyttämällä ng luoda palvelun ExcelService.

Tämä Tuottaa komento luo palvelutiedoston: ExcelService.service.ts, in src/app projektin hakemistosta. Tiedosto näyttää oletuksena tältä:

tuonti { Injektoitava } alkaen'@kulma/ydin'; 
@Injektoitava({ tarjotaan: 'juuri' }) 
viedäluokkaaExcelServiceService{
rakentaja() { } 
}

Tämä ExcelService tiedosto hoitaa toiminnon tietojen viemiseksi Excel-muotoon. Päivitä ExcelService.service.ts tiedosto näyttää alla olevalta koodilta:

tuonti { Injektoitava } alkaen'@kulma/ydin'; 
tuonti * kuten XLSX alkaen'xlsx'; 
konst EXCEL_EXTENSION = '.xlsx'; // excel-tiedostopääte
@Injektoitava({ tarjotaan: 'juuri' }) 
viedäluokkaaExcelServiceService{ 
rakentaja () { }
julkinenvienti Exceliin(elementti: mikä tahansa, tiedostonimi: merkkijono): mitätön{
// luo työkirja ja lisää laskentataulukko
konst ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet (elementti);
konst työkirja: XLSX.WorkBook = XLSX.utils.book_new(); 
// tallenna tiedostoon
 XLSX.utils.book_append_sheet (työkirja, ws, "Sheet1");
 XLSX.writeFile (työkirja, ${fileName}${EXCEL_EXTENSION}); 
 }
}

Yllä olevassa koodissa tuot Xlsx kirjasto ja luo vakiomuuttuja, EXCEL_EXTENSION tallentaaksesi Excel-tiedostotunnisteen.

The vienti Exceliin menetelmä hyväksyy kaksi parametria: elementti ja Tiedoston nimi. Elementtiparametri edustaa Excel-tiedostoon vietäviä tietoja, kun taas Tiedoston nimi parametri on Excel-tiedoston nimi.

Vie tiedot Excel-tiedostoon luomalla laskentataulukko käyttämällä json_to_sheet Xlsx-kirjaston menetelmä. Luo myös työkirja kirjaston avulla kirja_uusi menetelmä.

Lisää sitten laskentataulukko työkirjaan kirja_liitearkki -menetelmää ja tallenna tiedosto tiedostoon käyttämällä kirjoitustiedosto.

Aiemmin loit Excel-palvelun, joka helpottaa JSON-tietojen lataamista ja muuntamista Excel-taulukoksi. Jotta voit käyttää tätä palvelua, sinun on luo asiaankuuluva kulmakomponentti ja tuo palvelutiedosto siihen.

tuonti { ExcelService } alkaen'./excel.service';

Seuraavaksi sinun on ruiskutettava se komponentin rakentajaan seuraavasti:

rakentaja(yksityinen excelService: ExcelService) { 
... 
}

Sitten voit siirtyä toteuttamaan toiminnon (vie Excel), jossa käytät vienti Exceliin tapa viedä JSON Exceliin. Alla oleva koodi näyttää, kuinka tämä tehdään.

exportExcel(): mitätön { 
konst fileToExport = Tämä.apiJsonResponseData.map((tuotteet: mikä tahansa) => { 
palata {
"Käyttäjätunnus": items?.userId,
"Id": tuotteet?.id,
"Otsikko": kohteita?.title,
"Keho": esineet?.body
 } 
 });
Tämä.excelService.exportToExcel(
 tiedosto vientiin,
"excel-tiedostosi-" + UusiPäivämäärä().getTime() + '.xlsx'
 );
}

Yllä olevassa koodissa olet määrittänyt vie Excel tapa soittaa vienti Exceliin menetelmä ExcelService. Uusi muuttuja, tiedosto vientiin, tallentaa tiedot vietäväksi. The apiJsonResponseData matriisi sisältää API-vastauksesta saadut JSON-tiedot.

Myöhemmin, vienti Exceliin menetelmä excelService ottaa fileToExport ja valitsemasi Tiedoston nimi. Huomaa, kuinka voit liittää nykyisen aikaleiman tiedoston nimeen varmistaaksesi, että se on ainutlaatuinen. Tämä menetelmä muuntaa JSON-tiedot ja vie ne XLSX-tiedostoon, jota voit esikatsella Excelissä.

Tämä toiminto on nyt käytettävissä missä tahansa Angular-sovelluksesi osassa, ja voit helposti lisätä sen tapahtumakäsittelijäksi klikkaus tapahtumaan tai käytä sitä muulla sopivalla tavalla tarpeidesi mukaan.

Näet esimerkin tämän toiminnon käytöstä alla olevassa kuvassa. Ulkoisen API: n JSON-tiedot hahmonnetaan sivulla painikkeella Vie tiedot Exceliin:

Kun napsautat Vie tiedot Exceliin -painiketta, selaimesi lataa Excel-tiedoston. Kun sinä avaa XLSX-tiedosto, tulostettava laskentataulukkotiedosto näyttää tältä:

Xlsx-kirjasto voi tehdä paljon muutakin kuin muuntaa JSONin Excel-muotoon. Se tarjoaa vankan kirjaston ja tukee erilaisia ​​tiedostomuotoja, joita saatat kohdata liiketoiminnassa. Tutustu Xlsx-kirjaston dokumentaatio npm: ssä saadaksesi lisätietoja siitä.

Tietojen muuntaminen JSONista Excel-laskentataulukoiksi Angularissa

Xlsx-kirjaston avulla voit helposti käsitellä Excel-laskentataulukoita verkkosovelluksessasi. Tässä suorittamasi vaiheet mahdollistavat JSON-tietojen muuntamisen API: sta hyvin järjestetyksi Excel-laskentataulukoksi. Voit myös muuntaa Excel-tiedot takaisin JSON-muotoon käyttämällä muita kirjaston toimintoja.

Hyvä tapa harjoitella tämän kirjaston käyttöä on rakentaa sovellus, joka luo viikoittaisia ​​tai kuukausittaisia ​​raportteja API: sta ja järjestää ne Excel-tietoina.