Wie lade ich eine Datei mit Angular2 oder höher herunter

Lesezeit: 5 Minuten

Wie lade ich eine Datei mit Angular2 oder hoher herunter
rl

Ich habe eine WebApi / MVC-App, für die ich einen Angular2-Client entwickle (um MVC zu ersetzen). Ich habe einige Probleme zu verstehen, wie Angular eine Datei speichert.

Die Anfrage ist in Ordnung (funktioniert gut mit MVC, und wir können die empfangenen Daten protokollieren), aber ich kann nicht herausfinden, wie die heruntergeladenen Daten gespeichert werden (ich folge hauptsächlich der gleichen Logik wie in diesem Beitrag). Ich bin sicher, es ist dumm einfach, aber bisher verstehe ich es einfach nicht.

Der Code der Komponentenfunktion ist unten. Ich habe verschiedene Alternativen ausprobiert, der Blob-Weg sollte so weit ich verstanden habe der richtige Weg sein, aber es gibt keine Funktion createObjectURL in URL. Ich kann nicht einmal die Definition von finden URL im Fenster, aber anscheinend existiert es. Wenn ich die verwende FileSaver.js Modul Ich bekomme den gleichen Fehler. Ich vermute also, dass sich dies kürzlich geändert hat oder noch nicht implementiert ist. Wie kann ich die Dateispeicherung in A2 auslösen?

downloadfile(type: string){

    let thefile = {};
    this.pservice.downloadfile(this.rundata.name, type)
        .subscribe(data => thefile = new Blob([data], { type: "application/octet-stream" }), //console.log(data),
                    error => console.log("Error downloading the file."),
                    () => console.log('Completed file download.'));

    let url = window.URL.createObjectURL(thefile);
    window.open(url);
}

Der Vollständigkeit halber ist der Dienst, der die Daten abholt, unten, aber das einzige, was er tut, ist, die Anfrage zu stellen und die Daten ohne Zuordnung weiterzugeben, wenn dies gelingt:

downloadfile(runname: string, type: string){
   return this.authHttp.get( this.files_api + this.title +"https://stackoverflow.com/"+ runname + "/?file="+ type)
            .catch(this.logAndPassOn);
}

Wie lade ich eine Datei mit Angular2 oder hoher herunter
Hector Cuevas

Versuchen Das!

1 – Installieren Sie Abhängigkeiten für das Popup-Fenster zum Speichern/Öffnen von Dateien

npm install file-saver --save
npm install -D @types/file-saver

2- Erstellen Sie einen Dienst mit dieser Funktion, um die Daten zu empfangen

downloadFile(id): Observable<Blob> {
    let options = new RequestOptions({responseType: ResponseContentType.Blob });
    return this.http.get(this._baseUrl + "https://stackoverflow.com/" + id, options)
        .map(res => res.blob())
        .catch(this.handleError)
}

3- Analysieren Sie in der Komponente den Blob mit ‘file-saver’

import {saveAs as importedSaveAs} from "file-saver";

  this.myService.downloadFile(this.id).subscribe(blob => {
            importedSaveAs(blob, this.fileName);
        }
    )

Das funktioniert für mich!

  • Ich habe Schritt 2 in Kombination mit der Antwort von @Alejandro verwendet und es hat funktioniert, ohne dass der Dateischoner installiert werden musste …

    – Ewert

    13. März 2018 um 11:11 Uhr

  • Danke! Es funktioniert perfekt! Ich frage mich, ob wir den Dateinamen erhalten können, der im Header der Antwort definiert ist. Ist das möglich?

    – jfajunior

    26. März 2018 um 9:41 Uhr

  • error Av5 Argument des Typs „RequestOptions“ kann Parameter des Typs „{ headers?: HttpHeaders | { [header: string]: Zeichenkette | Schnur[]; };

    – Job geben

    16. November 2018 um 8:35 Uhr

  • Dieser ist jedoch nicht für den Download großer Dateien geeignet.

    – Reven

    3. April 2020 um 9:19 Uhr

  • @jfajunior Wenn Sie den Dateinamen aus der Antwort möchten, müssen Sie auf den Antwortheader zugreifen: hinzufügen observe: 'response' zu den Anfrage-Optionen und zurück Observable<HttpResponse<Blob>> anstatt Observable<Blob> – Jetzt können Sie auf den Antwortheader zugreifen und den Dateinamen lesen, z res.headers.get('File-Name')

    – Sepultur

    17. Dezember 2020 um 16:33 Uhr

  • Kann bitte jemand sagen, warum diese Antwort abgelehnt wird? Das Thema ist das Herunterladen einer Datei mit angle2. Wenn diese Methode für einen einfachen Download funktioniert, sollte sie auch als gültige Antwort markiert werden.

    – Saurabh Shetty

    15. Februar 2017 um 18:37 Uhr

  • @SaurabhShetty, Dies hilft nicht, wenn Sie benutzerdefinierte Header senden möchten. Was ist, wenn Sie beispielsweise ein Authentifizierungstoken senden möchten? Wenn Sie sich die OP-Frage ansehen, können Sie sehen, dass er verwendet authHttp!

    – A.Akram

    17. April 2017 um 10:50 Uhr


  • Ich verstehe die Ablehnungen, dennoch hat diese Antwort mein Problem gelöst.

    – JoeriShoeby

    21. April 2017 um 13:06 Uhr

  • Wenn Sie den Server die URL in einem bestimmten Kontext zurückgeben lassen, könnte der Server die URL vorbereiten. Beispiel: Objekt: MyRecord.Cover. Das Cover könnte eine URL zu einem Bild auf dem Server sein. Wenn Sie get(Myrecord) aufrufen, lassen Sie den Server die vorbereitete URL (Cover) mit dem Sicherheitstoken und anderen gesetzten Headern zurückgeben.

    – Jens Alenius

    23. Oktober 2017 um 13:26 Uhr


  • Es ist eine Antwort, die funktioniert. Nur weil es keine hat, die es nicht zu einer Antwort macht.

    – ArtUnbekannt

    19. November 2019 um 16:21 Uhr

1646256309 522 Wie lade ich eine Datei mit Angular2 oder hoher herunter
Justin

Dies ist für Leute, die suchen, wie es mit HttpClient und File-Saver geht:

  1. Dateischoner installieren

npm install file-saver –save

npm install @types/file-saver –save

API-Dienstklasse:

export() {
    return this.http.get(this.download_endpoint, 
        {responseType: 'blob'});
}

Komponente:

import { saveAs } from 'file-saver';
exportPdf() {
    this.api_service.export().subscribe(data => saveAs(data, `pdf report.pdf`));
}

  • Wie kann ich die Dateigröße im Browser anzeigen, wenn der Download beginnt? Ich sende die Dateigröße als Inhaltslänge im http-Header.

    – bescheidener Coder

    9. Dezember 2018 um 18:13 Uhr


Wie lade ich eine Datei mit Angular2 oder hoher herunter
Frederik Struck-Schöning

Wie wäre es damit?

this.http.get(targetUrl,{responseType:ResponseContentType.Blob})
        .catch((err)=>{return [do yourself]})
        .subscribe((res:Response)=>{
          var a = document.createElement("a");
          a.href = URL.createObjectURL(res.blob());
          a.download = fileName;
          // start download
          a.click();
        })

Ich könnte damit umgehen.
kein zusätzliches Paket erforderlich.

  • Wie kann ich die Dateigröße im Browser anzeigen, wenn der Download beginnt? Ich sende die Dateigröße als Inhaltslänge im http-Header.

    – bescheidener Coder

    9. Dezember 2018 um 18:13 Uhr


1646256310 873 Wie lade ich eine Datei mit Angular2 oder hoher herunter
AbdullahA

Für neuere eckige Versionen:

npm install file-saver --save
npm install @types/file-saver --save


import {saveAs} from 'file-saver';

this.http.get('endpoint/', {responseType: "blob", headers: {'Accept': 'application/pdf'}})
  .subscribe(blob => {
    saveAs(blob, 'download.pdf');
  });

  • Danke, funktioniert mit Angular 8. Ich weiß nicht, warum das so schwer zu finden war.

    – MDave

    12. Mai 2020 um 23:47 Uhr

916280cookie-checkWie lade ich eine Datei mit Angular2 oder höher herunter

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy