So laden Sie CSV-Dateien mit Angular hoch und herunterladen

Datensätze sind für die Erstellung von API-Modellen und verschiedenen Geschäftsprozessen äußerst wichtig. Aus diesem Grund ist der Import und Export von CSV eine häufig benötigte Funktionalität.

In diesem Tutorial erfahren Sie, wie Sie eine CSV-Datei in einer Angular-App herunterladen und importieren. Wir werden mit einer CSV-Datei arbeiten, die Mitarbeiterdetails enthält. Der Code wird in TypeScript geschrieben.

Bevor Sie beginnen, müssen Sie eine neue Angular-Umgebung einrichten, einen neuen Arbeitsbereich mit einer ersten Anwendung erstellen und mit der Bereitstellung beginnen. A Schritt-für-Schritt-Anleitung zum Erstellen des Boilerplates für Ihre Angular-App finden Sie im offiziellen Tutorial.

Hier ist die Ordnerstruktur der Boilerplate-Anwendung:

1. Erstellen Sie ein einfaches Modell

Erstellen wir zunächst eine einfache Klasse zur Modellierung des Mitarbeiters. Dieses Modell wird von den Angular-Komponenten verbraucht.

Das Muster für die Speicherung der Mitarbeiterdaten ist unten aufgeführt. Dabei handelt es sich lediglich um ein Grundmodell mit dem Namen, der E-Mail-Adresse und der Stadt des Mitarbeiters.

2. Erstellen Sie den Dienst

Angular-Anwendungen sind modular aufgebaut. Dies macht die Anwendung robust und leicht zu warten. Eine der Hauptregeln jeder Angular-Anwendung ist, dass es Komponenten nicht erlaubt sein darf, Daten direkt zu speichern oder abzurufen. Deshalb muss man es nutzen Dienstleistungen um auf Daten zuzugreifen und diese darzustellen. In unserem Anwendungsfall benötigen wir einen Dienst zum Herunterladen und Importieren von CSV-Daten.

Unsere Servicedatei ist csv.services.ts.

Sobald der Dienst erstellt ist, kann er in jede beliebige Komponente eingefügt werden. Vor der Herstellung CSV.service Zur Injektion verfügbar, muss es registriert werden app.module.ts als Anbieter.

In dieser Demo programmieren wir zwei verschiedene Arten von Funktionalitäten:

• • Speichern von Daten in einer CSV-Datei

• • Importieren von Daten aus einer CSV-Datei

Methode zum Speichern von Daten in einer CSV-Datei

Befassen wir uns zunächst mit der einfachsten Funktionalität. Das Speichern von Daten in einer CSV-Datei erfordert das Lesen eines Arrays von Objekten. Objekte in JavaScript verfügen über Eigenschaften, die einen Wert haben. Wir lesen alle diese Eigenschaften für jedes Objekt aus und verbinden sie mit einem Komma. Mit den folgenden Codezeilen wird dies erreicht:

Sobald die Titel zusammengefügt sind, werden sie als angehängt erste Reihe. Danach durchläuft eine Schleife das Array und liest alle Eigenschaften und deren Werte. Diese Werte werden an die CSV-Datei angehängt.

Der vollständige Code zum Erstellen des Headers, zum Lesen des Array-Inhalts und zum Erstellen der CSV-Datei ist unten angegeben.

Methode zum Importieren von Daten aus einer CSV

Unser nächster Service ist Importieren Sie Daten aus einer CSV-Datei. Dazu definieren wir a function das nimmt den Inhalt einer Datei in Form einer Datei an string. Die Eigenschaftsnamen und Datenzeilen werden aus dem Inhalt der Datei erstellt.

Mit den obigen Codezeilen erhalten wir sowohl die Eigenschaftsnamen als auch die Daten. Mit diesen Informationen bleibt uns nur noch die Aufgabe, den Inhalt der CSV auszudrucken. Der Code zum Drucken des Inhalts ist unten angegeben:

3. Erstellen der UI-Elemente

Als nächstes erstellen wir die HTML-Elemente für den Import und Export der CSV-Dateien.

Die Datei für UI-Elemente ist app.component.html.

Speichern des Inhalts einer CSV

Um eine CSV-Datei zu speichern, verwenden wir eine sehr traditionelle Methode zum Herunterladen von Dateien in JavaScript.

1. 1. Erstellen Sie ein verstecktes Ankerelement <a>.

1. 1. Stellen Sie die ein href Typ dieses Ankerelements zu data:text/csv.

1. 1. Automatisch auslösen click Fall.

Der vollständige Code zum Herunterladen der CSV-Datei ist unten angegeben. Dieser Code wird in sein app.component.ts.

Hier sind einige Beispieldaten, die wir an die obige Funktion übergeben können. Wie Sie sehen, verwenden wir das in Schritt 1 erstellte Modell.

Als Nächstes verknüpfen wir die obige Funktionalität mit einer Schaltfläche, die auf dem Bildschirm angezeigt wird und auf die wir klicken können. Dies wird eingetragen app.component.html.

Den Inhalt einer CSV lesen

Es ist ganz einfach, Dateien in HTML mit zu öffnen und zu lesen <input> Schild. Das Eingabe-Tag enthält Eigenschaften wie type, (accept)Und (change).

• • type muß sein 'file' um anzuzeigen, dass eine Datei vom Benutzer ausgewählt wird.

• • (accept) muß sein '.csv' um anzugeben, dass dem Benutzer nur CSV-Dateien zur Auswahl angezeigt werden sollen.

• • (change) Werde das anrufen importDataFromCSV Funktion mit einem Parameter $event das Eigenschaften mit dem Inhalt der Datei hat.

Der $event Die Eigenschaft trägt die Datei im Inneren event.target.filesWo files ist ein Array. Der Inhalt der Datei kann in verschiedenen Formaten extrahiert werden. Für unseren Anwendungsfall werden wir extrahieren text() aus der Datei. Denken Sie daran, dass die Methode zum Lesen der Datei asynchron sein sollte, weshalb wir sie verwenden await Und async. Der einfache Code zum Lesen von Text aus einer CSV-Datei ist hier:

Sobald der Textinhalt aus der CSV-Datei extrahiert wurde, können wir den in Schritt 2 definierten Dienst verwenden.

Und die obige Funktion kann mit einer Schaltfläche verknüpft werden app.component.html.

4. Integration der gesamten Anwendung

Jetzt ist es Zeit zu bauen app.module.ts. Hier werden alle Anbieter, Importe, Deklarationen und die Bootstrap-Komponente registriert.

Mit dieser Änderung können Sie den folgenden Bildschirm sehen.

Live-Demo

Abschluss

In diesem Beitrag haben Sie gesehen, wie Sie CSV-Daten hoch- und herunterladen und wie Sie CSV-Daten in eine Textdatei hinein und aus einer Textdatei analysieren.