Wie lade ich Dateien erfolgreich von Ihrer WebApi/MVC-App in Angular2 herunter?

Effektives Herunterladen von Dateien mit Angular2

In Ihrer Angular2-Anwendung sind Sie auf Schwierigkeiten beim Speichern heruntergeladener Dateien aus Ihrer WebApi-/MVC-App gestoßen. Lassen Sie uns Ihr Problem untersuchen und eine Lösung anbieten.

Der bereitgestellte Code Ihrer Komponente verwendet den Blob()-Konstruktor, um aus den empfangenen Daten eine Datei zu erstellen. Allerdings stehen Sie mit der Funktion URL.createObjectURL vor Herausforderungen, die in den aktuellen ECMAScript-Spezifikationen nicht verfügbar ist.

Die Lösung ergibt sich aus der Natur der Observablen in Angular2. Das zum Herunterladen der Datei verwendete Observable wird in einem anderen Kontext ausgeführt, was zu dem aufgetretenen Problem führt. Um dies zu beheben, müssen wir den Code ändern, um das Observable zu abonnieren, und die Dateierstellungs- und Speicherlogik innerhalb dieses Abonnements ausführen.

Ein effektiver Ansatz besteht darin, Ihre downloadfile()-Methode so umzugestalten, dass sie das Observable als abonniert folgt:

downloadfile(type: string){
  this.pservice.downloadfile(this.rundata.name, type)
    .subscribe(data => {
      this.downloadFile(data); // Call a separate function to handle file creation and saving
    },
    error => console.log("Error downloading the file."),
    () => console.log('Completed file download.'));
}

In dieser aktualisierten Methode führen wir eine neue downloadFile()-Funktion ein, die für die Erstellung der Datei und das Initiieren der Datei verantwortlich ist herunterladen.

downloadFile(data: Response) {
  const blob = new Blob([data], { type: "application/octet-stream" });
  const url = window.URL.createObjectURL(blob);
  window.open(url);
}

Durch das Abonnieren des Observablen und die Definition der downloadFile()-Funktion stellen wir sicher, dass die Dateierstellung und -speicherung im richtigen Kontext erfolgt, sodass Sie die heruntergeladene Datei erfolgreich speichern und öffnen können.

Das obige ist der detaillierte Inhalt vonWie lade ich Dateien erfolgreich von Ihrer WebApi/MVC-App in Angular2 herunter?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!