Hogyan konvertálhat JSON-adatokat Excel-táblázattá Angular segítségével

Fejlesztőként nyitott vagy arra, hogy naponta új kihívásokkal nézzen szembe különböző projektekben, amelyeken esetleg éppen dolgozik. A webalkalmazásoknak időnként extra feladatokat kell végrehajtaniuk az üzleti vagy műszaki követelményektől függően eltérő célok elérése érdekében.

Előfordulhat, hogy adatokat kell gyűjtenie egy API-ból, és más formátumban kell feldolgoznia, például PDF, XML, DOCX vagy XLSX.

Ebből az útmutatóból megtudhatja, hogyan alakíthatja át az API-válaszból kapott JSON-adatokat egy jól szervezett Excel-táblázattá az Angular alkalmazásban.

Mi az XLSX könyvtár?

Az Xlsx-könyvtár hatékony erőforrás azoknak az Angular-fejlesztőknek, akik az API-válaszból származó JSON-adatokat egy ügyes Excel-táblázattá szeretnék átalakítani. A modul használatával a fejlesztők gyorsan letölthetik és módosíthatják a JSON-adatokat.

Az Xlsx könyvtár segítségével jelentéseket készíthet csapata számára, vagy új módon jelenítheti meg az adatokat. Ha gyorsan és egyszerűen szeretné kezelni adatait JavaScript-alkalmazásokban, ez egy jó lehetőség.

Az XLSX könyvtár konfigurálása szögletes alkalmazással

Mielőtt elkezdené az Xlsx könyvtár használatát az Angular alkalmazásban, fontos, hogy Node.js és Angular fejlesztői környezet legyen beállítva a gépen. Telepített Node.js esetén az Angular futással könnyen beállítható npm install -g @angular/cli egy terminálban.

Hozzon létre egy új Angular projektet futtatással ng new [your-angular-app-name] a terminálban. Ezután navigáljon a projektkönyvtárba az alábbiak szerint:

A helyi fejlesztési kiszolgálót futtatással is elindíthatja ng szolgálni --o, amellyel élőben tekintheti meg Angular alkalmazását és a rajta végrehajtott módosításokat a böngészőben.

Az Angular alkalmazás beállítása után az Xlsx Library telepítése egy egyszerű folyamat, amelyet egyszerűen futtathat npm install xlsx --save. Ez a parancs telepíti az Xlsx könyvtár használatához szükséges függőségeket.

Hogyan konvertálhat JSON adatokat XLSX formátumba szögben

Az Angular CLI-vel új szolgáltatást hozhat létre a szolgáltatás létrehozása [szolgáltatás neve] parancsot a terminálban. Például ebben az esetben létrehozhatja a szükséges Excel szolgáltatást ng szolgáltatást generál ExcelService.

Ez generál parancs létrehozza a szolgáltatásfájlt: ExcelService.service.ts, ban,-ben src/app a projekt címtárát. A fájl alapértelmezés szerint így néz ki:

import { Injekciós } tól től"@angular/core"; 
@Injektálható({ biztosítottIn: 'gyökér' }) 
exportosztályExcelServiceService{
konstruktőr() { } 
}

Ez ExcelService fájl kezeli az adatok Excel formátumba exportálásának funkcióját. Frissítse a ExcelService.service.ts fájlt, hogy az alábbi kódhoz hasonlóan nézzen ki:

import { Injekciós } tól től"@angular/core"; 
import * mint XLSX tól től'xlsx'; 
const EXCEL_EXTENSION = ".xlsx"; // excel fájlkiterjesztés
@Injektálható({ biztosítottIn: 'gyökér' }) 
exportosztályExcelServiceService{ 
konstruktőr () { }
nyilvánosexportálás Excelbe(elem: any, fileName: string): üres{
// munkafüzet létrehozása és a munkalap hozzáadása
const ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet (elem);
const munkafüzet: XLSX.WorkBook = XLSX.utils.book_new(); 
// mentés fájlba
 XLSX.utils.book_append_sheet (munkafüzet, ws, "1. lap");
 XLSX.writeFile (munkafüzet, ${fileName}${EXCEL_EXTENSION}); 
 }
}

A fenti kódban importálja a Xlsx könyvtárat, és hozzon létre egy állandó változót, EXCEL_EXTENSION az Excel fájlkiterjesztés tárolására.

A exportálás Excelbe A módszer két paramétert fogad el: elem és fájl név. Az elem paraméter az Excel fájlba exportálandó adatokat jelöli, míg a fájl név paraméter az Excel fájl neve.

Az adatok Excel-fájlba exportálásához hozzon létre egy munkalapot a json_to_sheet az Xlsx könyvtár módszere. Készítsen munkafüzetet is a könyvtár segítségével könyv_új módszer.

Ezután adja hozzá a munkalapot a munkafüzethez a könyv_melléklet_lap módszert, és a segítségével mentse el fájlba writeFile.

Korábban létrehozott egy Excel-szolgáltatást, amely megkönnyíti a JSON-adatok letöltését és Excel-lapokká konvertálását. A szolgáltatás használatához szükséges hozza létre a megfelelő Angular komponenst és importálja bele a szervizfájlt.

import { ExcelService } tól től"./excel.service";

Ezután be kell fecskendeznie az összetevő konstruktorába, így:

konstruktőr(privát excelService: ExcelService) { 
... 
}

Ezután folytathatja a funkció megvalósítását (exportExcel), ahol használni fogja a exportálás Excelbe módszer a JSON Excelbe exportálására. Az alábbi kód bemutatja, hogyan kell ezt megtenni.

exportExcel(): üres { 
const fileToExport = ez.apiJsonResponseData.map((tételek: bármilyen) => { 
Visszatérés {
"Felhasználói azonosító": items?.userId,
"Id": tételek?.id,
"Cím": tételek?.title,
"Test": tételek?.test
 } 
 });
ez.excelService.exportToExcel(
 fileToExport,
'excel-fájlod-' + újDátum().getTime() + ".xlsx"
 );
}

A fenti kódban meghatározta a exportExcel módszer hívására exportálás Excelbe módszere a ExcelService. Az új változó, fileToExport, tárolja az exportálandó adatokat. A apiJsonResponseData tömb tartalmazza az API-válaszból kapott JSON-adatokat.

Ezt követően a exportálás Excelbe módszere a excelService veszi a fileToExport és az általad preferált fájl név. Figyelje meg, hogyan fűzheti hozzá az aktuális időbélyeget a fájlnévhez, hogy megbizonyosodjon arról, hogy az egyedi. Ez a módszer konvertálja a JSON-adatokat, és exportálja azokat XLSX-fájlba, amelyet ezután megtekinthet az Excelben.

Ez a funkció mostantól az Angular alkalmazás bármely részében használható, és egyszerűen hozzáadhatja eseménykezelőként kattintson eseményt, vagy bármilyen más alkalmas módon felhasználhatja az Ön igényei szerint.

Az alábbi képen láthat egy példát ennek a funkciónak a használatára. Egy külső API-ból származó JSON-adatok jelennek meg az oldalon, egy gombbal Adatok exportálása Excelbe:

Amikor rákattint a Adatok exportálása Excelbe gombot, a böngésző letölti az Excel fájlt. Amikor te nyissa meg az XLSX fájlt, a kimeneti táblázatfájl így néz ki:

Az Xlsx könyvtár sokkal többre képes, mint a JSON-t Excel formátumba konvertálni. Robusztus könyvtárat kínál, és támogatja a különféle fájlformátumokat, amelyekkel az üzleti életben találkozhat. Nézze meg a Az Xlsx könyvtár dokumentációja az npm-en hogy többet megtudjon róla.

Adatok konvertálása JSON-ból Excel-táblázatokká Angular-ban

Az Xlsx könyvtár segítségével könnyedén kezelheti az Excel-táblázatokat webalkalmazásában. Az itt végrehajtott lépések lehetővé teszik, hogy a JSON-adatokat API-ból jól szervezett Excel-táblázattá alakítsa át. Az Excel-adatokat a könyvtár egyéb funkcióival is visszakonvertálhatja JSON-ba.

A könyvtár használatának gyakorlásának jó módja egy olyan alkalmazás létrehozása, amely heti vagy havi jelentéseket generál egy API-ból, és Excel-adatként rendezi azokat.