Transformați-vă datele cu ușurință urmând acest ghid scurt și simplu.
În calitate de dezvoltator, ești deschis să înfrunți zilnic noi provocări în diferite proiecte la care ai putea lucra. Aplicațiile web trebuie uneori să efectueze unele sarcini suplimentare pentru a atinge obiective diferite, în funcție de cerințele de afaceri sau tehnice.
Este posibil să fie necesar să colectați date dintr-un API și să le procesați într-un format diferit, cum ar fi PDF, XML, DOCX sau XLSX.
În acest ghid, veți învăța cum să transformați datele JSON primite dintr-un răspuns API într-o foaie de calcul Excel bine organizată în aplicația dvs. Angular.
Ce este biblioteca XLSX?
Biblioteca Xlsx este o resursă eficientă pentru dezvoltatorii Angular care doresc să transforme datele JSON dintr-un răspuns API într-o foaie de calcul Excel. Prin utilizarea acestui modul, dezvoltatorii pot descărca și modifica rapid datele JSON.
Puteți folosi biblioteca Xlsx pentru a crea rapoarte pentru echipa dvs. sau pentru a prezenta date în moduri noi. Dacă doriți o modalitate rapidă și ușoară de a vă gestiona datele în aplicațiile JavaScript, aceasta este o opțiune bună.
Cum să configurați biblioteca XLSX cu o aplicație unghiulară
Înainte de a începe cu biblioteca Xlsx din aplicația dvs. Angular, este important să aveți un mediu de dezvoltare Node.js și Angular configurat pe computer. Cu Node.js instalat, Angular este ușor de configurat prin rulare npm install -g @angular/cli într-un terminal.
Creați un nou proiect Angular rulând ng nou [numele-aplicația-tau-unghiulară] în terminal. Apoi navigați în directorul de proiect, așa cum se vede mai jos:
De asemenea, puteți porni un server de dezvoltare local prin rulare ng serve --o, care vă permite să vizualizați aplicația dvs. Angular și modificările aduse acesteia live în browser.
După ce ați configurat o aplicație Angular, instalarea Bibliotecii Xlsx este un proces simplu pe care îl puteți finaliza pur și simplu rulând npm install xlsx --save. Această comandă va instala dependențele necesare pentru a utiliza biblioteca Xlsx.
Cum să convertiți datele JSON în format XLSX în Angular
Cu Angular CLI, puteți genera un nou serviciu prin rularea generează serviciu [nume serviciu] comanda din terminal. De exemplu, în acest caz, puteți genera serviciul Excel de care aveți nevoie Generează serviciul ExcelService.
Acest Genera comanda va crea fișierul de serviciu: ExcelService.service.ts, în src/app directorul proiectului. Fișierul arată astfel în mod implicit:
import { injectabil } din„@angular/core”;@Injectabil({ furnizat în: 'rădăcină' })
exportclasăExcelServiceService{
constructor() { }
}
Acest ExcelService fișierul se va ocupa de funcționalitatea de a exporta date în format Excel. Actualizați ExcelService.service.ts fișier să arate ca codul de mai jos:
import { injectabil } din„@angular/core”;
import * la fel de XLSX din„xlsx”;const EXCEL_EXTENSION = „.xlsx”; // extensia fișierului excel
@Injectabil({ furnizat în: 'rădăcină' })
exportclasăExcelServiceService{
constructor () { }publicExportați în Excel(element: orice, fileName: șir): gol{
// generează registrul de lucru și adaugă foaia de lucru
const ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet (element);
const registru de lucru: XLSX.WorkBook = XLSX.utils.book_new();
// salvează în fișier
XLSX.utils.book_append_sheet (registru de lucru, ws, „Foaie 1”);
XLSX.writeFile (registru de lucru, ${fileName}${EXCEL_EXTENSION});
}
}
În codul de mai sus, importați Xlsx bibliotecă și creați o variabilă constantă, EXCEL_EXTENSION pentru a stoca extensia de fișier Excel.
The Exportați în Excel metoda acceptă doi parametri: element și nume de fișier. Parametrul element reprezintă datele de exportat în fișierul Excel, în timp ce nume de fișier parametrul este numele fișierului Excel.
Pentru a exporta datele în fișierul Excel, creați o foaie de lucru folosind json_to_sheet metoda bibliotecii Xlsx. De asemenea, creați un registru de lucru folosind bibliotecii carte_nouă metodă.
Apoi, adăugați foaia de lucru în registrul de lucru cu book_append_sheet metoda și salvați într-un fișier folosind scrie fișier.
Mai devreme, ați creat un serviciu Excel pentru a facilita procesul de descărcare și conversie a datelor JSON într-o foaie Excel. Pentru a utiliza acest serviciu, trebuie creați componenta unghiulară relevantă și importați fișierul de serviciu în el.
import { ExcelService } din„./excel.service”;
Apoi, trebuie să-l injectați în constructorul componentei astfel:
constructor(ExcelService privat: ExcelService) {
...
}
Apoi puteți continua să implementați funcția (exportExcel) unde veți folosi Exportați în Excel metodă de a exporta JSON în Excel. Codul de mai jos demonstrează cum se face acest lucru.
exportExcel(): gol {
const fileToExport = acest.apiJsonResponseData.map((articole: oricare) => {
întoarcere {
"ID-ul de utilizator": items?.userId,
"Id": articole?.id,
"Titlu": articole?.title,
"Corp": articole?.corp
}
});
acest.excelService.Exportați în Excel(
fileToExport,
„Fișierul dumneavoastră Excel-” + nouData().getTime() + „.xlsx”
);
}
În codul de mai sus, ați definit exportExcel metoda de a apela Exportați în Excel metoda de ExcelService. Noua variabilă, fileToExport, stochează datele pentru export. The apiJsonResponseData matricea conține datele JSON obținute din răspunsul API.
Ulterior, cel Exportați în Excel metoda de excelService ia fileToExport și preferatul tău nume de fișier. Observați cum puteți adăuga marcajul de timp actual la numele fișierului pentru a vă asigura că este unic. Această metodă va converti datele JSON și le va exporta într-un fișier XLSX pe care apoi îl puteți previzualiza în Excel.
Această funcție este acum disponibilă pentru utilizare în orice parte a aplicației dvs. Angular și o puteți adăuga cu ușurință ca handler de evenimente pentru un clic eveniment sau utilizați-l în orice alt mod adecvat, în funcție de cerințele dumneavoastră.
Puteți vedea un exemplu de utilizare a acestei funcționalități în imaginea de mai jos. Datele JSON dintr-un API extern sunt randate pe pagină, cu un buton pentru Exportați datele în Excel:
Când faceți clic pe Exportați datele în Excel butonul, browserul dvs. va descărca fișierul Excel. Cand tu deschideți fișierul XLSX, fișierul tabelar de ieșire arată astfel:
Biblioteca Xlsx poate face mult mai mult decât să convertească JSON în format Excel. Oferă o bibliotecă robustă și acceptă diverse formate de fișiere pe care le puteți întâlni în afaceri. Verificați Documentația bibliotecii Xlsx pe npm pentru a afla mai multe despre el.
Conversia datelor din JSON în foi de calcul Excel în Angular
Puteți utiliza biblioteca Xlsx pentru a manipula cu ușurință foile de calcul Excel în aplicația dvs. web. Pașii pe care i-ați efectuat aici vă permit să transformați datele JSON dintr-un API într-o foaie de calcul Excel bine organizată. De asemenea, puteți converti datele Excel înapoi în JSON folosind alte funcții din bibliotecă.
O modalitate bună de a exersa utilizarea acestei biblioteci este să construiți o aplicație care să genereze rapoarte săptămânale sau lunare dintr-un API și să le organizeze ca date Excel.
