JSON-gegevens converteren naar een Excel-spreadsheet met Angular

Als ontwikkelaar sta je dagelijks open voor nieuwe uitdagingen in verschillende projecten waar je aan werkt. Webapplicaties moeten soms wat extra taken uitvoeren om verschillende doelen te bereiken, afhankelijk van zakelijke of technische vereisten.

Mogelijk moet u gegevens van een API verzamelen en verwerken in een ander formaat, zoals PDF, XML, DOCX of XLSX.

In deze gids leert u hoe u JSON-gegevens die u van een API-antwoord ontvangt, omzet in een goed georganiseerde Excel-spreadsheet in uw Angular-toepassing.

Wat is de XLSX-bibliotheek?

De Xlsx-bibliotheek is een effectieve bron voor Angular-ontwikkelaars die JSON-gegevens van een API-antwoord willen omzetten in een nette Excel-spreadsheet. Door het gebruik van deze module kunnen ontwikkelaars snel JSON-gegevens downloaden en wijzigen.

U kunt de Xlsx-bibliotheek gebruiken om rapporten voor uw team te maken of om gegevens op nieuwe manieren te presenteren. Als u een snelle en gemakkelijke manier wilt om uw gegevens in JavaScript-toepassingen te beheren, is dit een goede optie.

Hoe de XLSX-bibliotheek te configureren met een Angular-toepassing

Voordat u aan de slag gaat met de Xlsx-bibliotheek in uw Angular-toepassing, is het belangrijk om een ​​Node.js- en Angular-ontwikkelomgeving op uw machine te hebben ingesteld. Met Node.js geïnstalleerd, is Angular eenvoudig in te stellen door het uit te voeren npm install -g @angular/cli in een terminal.

Maak een nieuw Angular-project door uit te voeren ng nieuwe [uw-hoekige-app-naam] in de terminal. Navigeer vervolgens naar de projectdirectory zoals hieronder te zien is:

U kunt ook een lokale ontwikkelserver starten door deze uit te voeren ng serveren --o, waarmee u uw Angular-toepassing en daarin aangebrachte wijzigingen live in de browser kunt bekijken.

Nadat u een Angular-toepassing hebt ingesteld, is het installeren van de Xlsx-bibliotheek een eenvoudig proces dat u eenvoudig kunt voltooien door het uit te voeren npm install xlsx --save. Met deze opdracht worden de afhankelijkheden geïnstalleerd die nodig zijn om de Xlsx-bibliotheek te gebruiken.

Hoe JSON-gegevens naar XLSX-formaat in Angular te converteren

Met de Angular CLI kunt u een nieuwe service genereren door het ng genereer service [servicenaam] opdracht in de terminal. In dit geval kunt u bijvoorbeeld de Excel-service genereren die u nodig hebt ng genereer service ExcelService.

Dit genereren opdracht zal het servicebestand maken: ExcelService.service.ts, in de src/app map van het project. Het bestand ziet er standaard zo uit:

importeren { Injecteerbaar } van'@hoekig/kern'; 
@Injecteerbaar({ Voorzien in: 'wortel' }) 
exporterenklasExcelServiceService{
constructeur() { } 
}

Dit ExcelService bestand zal de functionaliteit afhandelen om gegevens naar Excel-formaat te exporteren. Update de ExcelService.service.ts bestand om eruit te zien als de onderstaande code:

importeren { Injecteerbaar } van'@hoekig/kern'; 
importeren * als XLSX van'xlsx'; 
const EXCEL_EXTENSION = '.xlsx'; // Excel-bestandsextensie
@Injecteerbaar({ Voorzien in: 'wortel' }) 
exporterenklasExcelServiceService{ 
constructeur () { }
openbaarExporteren naar Excel(element: elk, bestandsnaam: tekenreeks): leegte{
// genereer een werkmap en voeg het werkblad toe
const ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet (element);
const werkmap: XLSX.WorkBook = XLSX.utils.book_new(); 
// opslaan in bestand
 XLSX.utils.book_append_sheet (werkmap, ws, 'Blad1');
 XLSX.writeFile (werkmap, ${bestandsnaam}${EXCEL_EXTENSION}); 
 }
}

In de bovenstaande code importeert u het Xlsx bibliotheek en maak een constante variabele, EXCEL_EXTENSION om de Excel-bestandsextensie op te slaan.

De Exporteren naar Excel methode accepteert twee parameters: element En bestandsnaam. De parameter element vertegenwoordigt de gegevens die naar het Excel-bestand moeten worden geëxporteerd, terwijl de bestandsnaam parameter is de naam van het Excel-bestand.

Om de gegevens naar het Excel-bestand te exporteren, maakt u een werkblad met de json_to_blad methode van de Xlsx-bibliotheek. Maak ook een werkmap met behulp van de bibliotheek boek_nieuw methode.

Voeg vervolgens het werkblad toe aan de werkmap met de book_append_sheet methode en sla het op in een bestand met behulp van schrijfBestand.

Eerder hebt u een Excel-service gemaakt om het downloaden en converteren van JSON-gegevens naar een Excel-blad te vergemakkelijken. Om deze service te gebruiken, moet u creëer de relevante hoekcomponent en importeer het servicebestand erin.

importeren { ExcelService } van'./excel.service';

Vervolgens moet u het als volgt in de constructor van de component injecteren:

constructeur(privé excelService: ExcelService) { 
... 
}

Vervolgens kunt u doorgaan met het implementeren van de functie (exporterenExcel) waar je de zal gebruiken Exporteren naar Excel methode om JSON naar Excel te exporteren. De onderstaande code laat zien hoe u dit doet.

exportExcel(): leegte { 
const bestandNaarExport = dit.apiJsonResponseData.map((artikelen: alle) => { 
opbrengst {
"Gebruikersnaam": items?.userId,
"ID kaart": artikelen?.id,
"Titel": artikelen?.titel,
"Lichaam": artikelen?.body
 } 
 });
dit.excelService.Exporteren naar Excel(
 bestandNaarExporteren,
'uwExcelBestand-' + nieuwDatum().getTime() + '.xlsx'
 );
}

In de bovenstaande code heb je de exporterenExcel methode om de Exporteren naar Excel methode van de ExcelService. De nieuwe variabele, bestandNaarExporteren, slaat de gegevens op om te exporteren. De apiJsonResponseData array bevat de JSON-gegevens die zijn verkregen uit het API-antwoord.

Vervolgens de Exporteren naar Excel methode van de excelService neemt de fileToExport en uw voorkeur bestandsnaam. Merk op hoe u de huidige tijdstempel aan de bestandsnaam kunt toevoegen om ervoor te zorgen dat deze uniek is. Met deze methode worden de JSON-gegevens geconverteerd en naar een XLSX-bestand geëxporteerd, waarvan u vervolgens een voorbeeld in Excel kunt bekijken.

Deze functie is nu beschikbaar voor gebruik in elk deel van uw Angular-toepassing en u kunt deze eenvoudig toevoegen als gebeurtenishandler voor een Klik evenement of gebruik het op een andere geschikte manier op basis van uw vereisten.

In de onderstaande afbeelding ziet u een voorbeeld van het gebruik van deze functionaliteit. JSON-gegevens van een externe API worden op de pagina weergegeven, met een knop om Gegevens exporteren naar Excel:

Wanneer u op de Gegevens exporteren naar Excel knop, zal uw browser het Excel-bestand downloaden. Wanneer je open het XLSX-bestand, ziet het uitgevoerde spreadsheetbestand er als volgt uit:

De Xlsx-bibliotheek kan veel meer dan JSON naar Excel-formaat converteren. Het biedt een robuuste bibliotheek en ondersteunt verschillende bestandsindelingen die u in het bedrijfsleven kunt tegenkomen. Bekijk de Xlsx-bibliotheekdocumentatie op npm om er meer over te weten te komen.

Gegevens converteren van JSON naar Excel-spreadsheets in Angular

U kunt de Xlsx-bibliotheek gebruiken om eenvoudig Excel-spreadsheets in uw webtoepassing te manipuleren. Met de stappen die u hier heeft uitgevoerd, kunt u JSON-gegevens van een API omzetten in een overzichtelijke Excel-spreadsheet. U kunt Excel-gegevens ook terug naar JSON converteren met behulp van andere functies in de bibliotheek.

Een goede manier om te oefenen met het gebruik van deze bibliotheek is door een applicatie te bouwen die wekelijkse of maandelijkse rapporten genereert vanuit een API en deze organiseert als Excel-gegevens.