Wie lade ich Dateien in Angular2 herunter?

Dateien in Angular2 herunterladen

Bei der Implementierung von Dateidownloads mit Angular2 stoßen Sie auf Schwierigkeiten. Insbesondere verstehen Sie nicht, wie Sie die empfangenen Daten speichern und die Funktion zum Speichern von Dateien auslösen. Lassen Sie uns untersuchen, wie dies in Angular erreicht werden kann.

Das Problem

Das Hauptproblem in Ihrem Code besteht darin, dass das zum Herunterladen der Datei verwendete Observable in einem separaten Kontext ausgeführt wird . Dies führt zu einem leeren Objekt, wenn versucht wird, die URL-Variable mit window.URL.createObjectURL zu erstellen. Um dieses Problem zu lösen, müssen wir sicherstellen, dass die Objekt-URL im richtigen Kontext erstellt wird.

Die Lösung

Eine wirksame Lösung für dieses Problem besteht darin, den zu abonnieren Observable und übergeben Sie die Daten an eine separate Funktion, die den Dateidownload übernimmt. Dies kann mit folgendem Code bewerkstelligt werden:

this._reportService.getReport().subscribe((data) => this.downloadFile(data));

Die downloadFile-Funktion ist wie folgt definiert:

downloadFile(data: Response) {
  const blob = new Blob([data], { type: 'text/csv' });
  const url = window.URL.createObjectURL(blob);
  window.open(url);
}

In dieser Funktion erstellen wir ein Blob-Objekt mit den Antwortdaten und geben an der Dateityp. Dann generieren wir die Objekt-URL und öffnen ein neues Fenster, um die Datei herunterzuladen.

Zusätzliche Überlegungen

Es ist wichtig sicherzustellen, dass das Modul „rxjs/Rx“ importiert wird korrekt. Um beobachtbare Funktionen wie „Abonnieren“ zu verwenden, müssen Sie möglicherweise die folgende Zeile oben in Ihre Komponente einfügen:

import 'rxjs/Rx';

Schlussfolgerung

Von Wenn Sie das Observable abonnieren und die Daten an eine spezielle Funktion übergeben, die die Objekt-URL erstellt, können Sie Dateien in Angular2 und höher erfolgreich herunterladen. Mit dieser Methode haben Sie eine bessere Kontrolle über den Download-Prozess und können die Daten im richtigen Kontext verarbeiten.

Das obige ist der detaillierte Inhalt vonWie lade ich Dateien in Angular2 herunter?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!