Wandeln Sie Ihre Daten ganz einfach um, indem Sie dieser kurzen und einfachen Anleitung folgen.

Als Entwickler sind Sie offen für täglich neue Herausforderungen in verschiedenen Projekten, an denen Sie möglicherweise arbeiten. Webanwendungen müssen manchmal einige zusätzliche Aufgaben ausführen, um je nach geschäftlichen oder technischen Anforderungen unterschiedliche Ziele zu erreichen.

Möglicherweise müssen Sie Daten von einer API erfassen und in einem anderen Format wie PDF, XML, DOCX oder XLSX verarbeiten.

In diesem Leitfaden erfahren Sie, wie Sie von einer API-Antwort empfangene JSON-Daten in eine gut organisierte Excel-Tabelle in Ihrer Angular-Anwendung umwandeln.

Was ist die XLSX-Bibliothek?

Die Xlsx-Bibliothek ist eine effektive Ressource für Angular-Entwickler, die JSON-Daten aus einer API-Antwort in eine übersichtliche Excel-Tabelle umwandeln möchten. Durch die Verwendung dieses Moduls können Entwickler JSON-Daten schnell herunterladen und ändern.

Sie können die Xlsx-Bibliothek verwenden, um Berichte für Ihr Team zu erstellen oder Daten auf neue Weise zu präsentieren. Wenn Sie Ihre Daten in JavaScript-Anwendungen schnell und einfach verwalten möchten, ist dies eine gute Option.

instagram viewer

So konfigurieren Sie die XLSX-Bibliothek mit einer Angular-Anwendung

Bevor Sie mit der Xlsx-Bibliothek in Ihrer Angular-Anwendung beginnen, ist es wichtig, eine Node.js- und Angular-Entwicklungsumgebung auf Ihrem Computer einzurichten. Wenn Node.js installiert ist, lässt sich Angular einfach durch Ausführen einrichten npm install -g @angular/cli in einem Endgerät.

Erstellen Sie ein neues Angular-Projekt, indem Sie es ausführen ng neu [Ihr-Winkel-App-Name] im Endgerät. Navigieren Sie dann wie unten gezeigt in das Projektverzeichnis:

Sie können auch einen lokalen Entwicklungsserver starten, indem Sie ihn ausführen ng dienen --o, mit dem Sie Ihre Angular-Anwendung und daran vorgenommene Änderungen live im Browser anzeigen können.

Nachdem Sie eine Angular-Anwendung eingerichtet haben, ist die Installation der Xlsx-Bibliothek ein einfacher Vorgang, den Sie einfach durch Ausführen abschließen können npm install xlsx --save. Dieser Befehl installiert die Abhängigkeiten, die für die Verwendung der Xlsx-Bibliothek erforderlich sind.

So konvertieren Sie JSON-Daten in das XLSX-Format in Angular

Mit der Angular-CLI können Sie einen neuen Dienst generieren, indem Sie die ng-Generierdienst [Dienstname] Befehl im Terminal. In diesem Fall können Sie beispielsweise den benötigten Excel-Dienst generieren ng generiert den Dienst ExcelService.

Das generieren Der Befehl erstellt die Servicedatei: ExcelService.service.ts, im quelle/app Verzeichnis des Projektes. Die Datei sieht standardmäßig so aus:

importieren {Injizierbar} aus'@eckig/Kern'; 
@ Injizierbar({ bereitgestellt in: 'Wurzel' }) 
ExportKlasseExcelServiceService{
Konstrukteur() { } 
}

Das ExcelService Datei übernimmt die Funktionalität zum Exportieren von Daten in das Excel-Format. Aktualisieren Sie die ExcelService.service.ts Datei wie der folgende Code aussehen:

importieren {Injizierbar} aus'@eckig/Kern'; 
importieren * als XLSX aus'xlsx'; 
konst EXCEL_EXTENSION = '.xlsx'; // Excel-Dateierweiterung


@ Injizierbar({ bereitgestellt in: 'Wurzel' }) 


ExportKlasseExcelServiceService{ 
Konstrukteur () { }


öffentlichNach Excel exportieren(Element: beliebig, Dateiname: Zeichenfolge): Leere{
// Arbeitsmappe erstellen und Arbeitsblatt hinzufügen
konst ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet (Element);
konst Arbeitsmappe: XLSX.WorkBook = XLSX.utils.book_new(); 
// speichern unter
 XLSX.utils.book_append_sheet (Arbeitsmappe, ws, 'Blatt1');
 XLSX.writeFile (Arbeitsmappe, ${Dateiname}${EXCEL_EXTENSION}); 
 }
}

Im obigen Code importieren Sie die XLSX Bibliothek und erstellen Sie eine konstante Variable, EXCEL_EXTENSION zum Speichern der Excel-Dateierweiterung.

Der Nach Excel exportieren Die Methode akzeptiert zwei Parameter: Element Und Dateinamen. Der Elementparameter stellt die Daten dar, die in die Excel-Datei exportiert werden sollen, während die Dateinamen Parameter ist der Name der Excel-Datei.

Um die Daten in die Excel-Datei zu exportieren, erstellen Sie ein Arbeitsblatt mit der json_to_sheet Methode der Xlsx-Bibliothek. Erstellen Sie auch eine Arbeitsmappe mit der Bibliothek buch_neu Methode.

Fügen Sie dann das Arbeitsblatt mit der Arbeitsmappe hinzu book_append_sheet Methode, und speichern Sie die in einer Datei mit Datei schreiben.

Zuvor haben Sie einen Excel-Dienst erstellt, um das Herunterladen und Konvertieren von JSON-Daten in eine Excel-Tabelle zu erleichtern. Um diesen Dienst nutzen zu können, müssen Sie Erstellen Sie die relevante Angular-Komponente und importieren Sie die Servicedatei hinein.

importieren {ExcelService} aus'./excel.service';

Als nächstes müssen Sie es wie folgt in den Konstruktor der Komponente einfügen:

Konstrukteur(privater ExcelService: ExcelService) { 
... 
}

Dann können Sie mit der Implementierung der Funktion fortfahren (exportierenExcel), wo Sie die verwenden Nach Excel exportieren Methode zum Exportieren von JSON nach Excel. Der folgende Code zeigt, wie das geht.

exportExcel(): Leere { 
konst fileToExport = Das.apiJsonResponseData.map((Artikel: alle) => { 
zurückkehren {
"Benutzer-ID": Artikel?.Benutzer-ID,
"Ausweis": Artikel?.id,
"Titel": Artikel?.Titel,
"Körper": Artikel?.Körper
 } 
 });
Das.excelService.Nach Excel exportieren(
 fileToExport,
'IhreExcelDatei-' + neuDatum().getTime() + '.xlsx'
 );
}

Im obigen Code haben Sie die definiert exportierenExcel Methode zum Aufrufen der Nach Excel exportieren Methode der ExcelService. Die neue Variable, fileToExport, speichert die zu exportierenden Daten. Der apiJsonResponseData array enthält die aus der API-Antwort erhaltenen JSON-Daten.

Anschließend die Nach Excel exportieren Methode der excelService nimmt die fileToExport und Ihre bevorzugte Dateinamen. Beachten Sie, wie Sie den aktuellen Zeitstempel an den Dateinamen anhängen können, um sicherzustellen, dass er eindeutig ist. Diese Methode konvertiert die JSON-Daten und exportiert sie in eine XLSX-Datei, die Sie dann in Excel in der Vorschau anzeigen können.

Diese Funktion kann jetzt in jedem Teil Ihrer Angular-Anwendung verwendet werden, und Sie können sie problemlos als Ereignishandler für a hinzufügen klicken Ereignis oder verwenden Sie es auf andere geeignete Weise entsprechend Ihren Anforderungen.

Sie können ein Beispiel für die Verwendung dieser Funktionalität im Bild unten sehen. JSON-Daten von einer externen API werden auf der Seite mit einer Schaltfläche gerendert Daten nach Excel exportieren:

Wenn Sie auf die klicken Daten nach Excel exportieren klicken, lädt Ihr Browser die Excel-Datei herunter. Wenn du Öffnen Sie die XLSX-Datei, sieht die Ausgabetabellendatei so aus:

Die Xlsx-Bibliothek kann viel mehr, als JSON in das Excel-Format zu konvertieren. Es bietet eine robuste Bibliothek und unterstützt verschiedene Dateiformate, denen Sie im Geschäftsleben begegnen könnten. Besuche die Dokumentation der Xlsx-Bibliothek zu npm um mehr darüber zu erfahren.

Konvertieren von Daten von JSON in Excel-Tabellen in Angular

Sie können die Xlsx-Bibliothek verwenden, um Excel-Tabellen in Ihrer Webanwendung einfach zu bearbeiten. Mit den hier ausgeführten Schritten können Sie JSON-Daten von einer API in eine gut organisierte Excel-Tabelle umwandeln. Sie können Excel-Daten auch mit anderen Funktionen in der Bibliothek zurück in JSON konvertieren.

Eine gute Möglichkeit, die Verwendung dieser Bibliothek zu üben, besteht darin, eine Anwendung zu erstellen, die wöchentliche oder monatliche Berichte aus einer API generiert und sie als Excel-Daten organisiert.