webentwicklung-frage-antwort-db.com.de

Herunterladen der XLSX-Datei in angular 2 mit Blob

Ich möchte die XLSX-Datei vom Client auf angular 2 mit Rest-API herunterladen.

Ich erhalte ein Byte-Array als Antwort auf meine GET-Anfrage und sende es mit subscribe an die Download-Funktion:

let options = new RequestOptions({ search: params });
this.http.get(this.restUrl, options)
          .subscribe(this.download);

download-Funktion über Blob:

download(res: Response) {
let data = new Blob([res.arrayBuffer()], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;' });
FileSaver.saveAs(data, this.fileName);};

mein Problem ist, dass meine Datei die ganze Zeit beschädigt ist. Ich habe viele Versionen davon ausprobiert, aber nichts funktioniert.

** habe es auch mit dieser Lösung versucht und es funktioniert nicht (die xlsx-Datei ist immer noch beschädigt) - Angular 2 beim Herunterladen einer Datei: beschädigtes Ergebnis , der Unterschied ist, dass meine Daten ein Array-Puffer sind und nicht string oder json, und es gibt einen Unterschied zwischen PDF und xlsx.

10x!

angulartypescriptblob
10
reut

Nachdem nichts funktioniert. Ich habe meinen Server so geändert, dass er dasselbe Byte-Array zurückgibt, mit dem Zusatz von:

    response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
    response.setHeader("Content-Disposition", "attachment; filename=deployment-definitions.xlsx");

Auf meinem Client habe ich die Download-Funktion gelöscht und anstelle des GET-Teils Folgendes ausgeführt:

window.open(this.restUrl, "_blank");

Dies ist die einzige Möglichkeit, eine nicht beschädigte xlsx-Datei zu speichern.

Wenn du eine Antwort hast, wie es mit dem Blob geht, sag es mir bitte :)

5
reut

Ich hatte das gleiche Problem wie Sie - behoben durch Hinzufügen von responseType: ResponseContentType.Blob zu meinen Get-Optionen. Überprüfen Sie den Code unten:

public getReport(filters: ReportOptions) {
    return this.http.get(this.url, {
            headers: this.headers,
            params: filters,
            responseType: ResponseContentType.Blob
        })
        .toPromise()
        .then(response => this.saveAsBlob(response))
        .catch(error => this.handleError(error));
}

Das saveAsBlob () ist nur ein Wrapper für das FileSaver.SaveAs ():

private saveAsBlob(data: any) {
    const blob = new Blob([data._body],
        { type: 'application/vnd.ms-Excel' });
    const file = new File([blob], 'report.xlsx',
        { type: 'application/vnd.ms-Excel' });

    FileSaver.saveAs(file);
}
11
Vergatti

sie können den folgenden Code verwenden:

var file = new Blob([data], { 
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
});
saveAs(file,"nameFile"+".xlsx");
deferred.resolve(data);
1
El mehdi AZROUR

Für mich war das Problem, dass mein responseType "text" war. Stattdessen musste ich "blob" verwenden. Es funktioniert für mich am Angular 7.2.15.

0
Andris

Hier ist die Lösung, die IE und Chrome/Safari-Browser unterstützt. Hier "Antwort" -Objekt ist Antwort vom Dienst erhalten. Ich habe diese Arbeit für das Archiv. Sie können den Typ entsprechend der erhaltenen Antwort ändern vom Service.

    let blob = new Blob([response], {type: 'application/Zip'});
    let fileUrl = window.URL.createObjectURL(blob);
    if (window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(blob, fileUrl.split(':')[1] + '.Zip');
    } else {
        this.reportDownloadName = fileUrl;
        window.open(fileUrl);
    }
0
Dilip Nannaware

Die folgende Lösung funktionierte für mich in Google Chrome Version 58.0.3029.110 (64-Bit).

Es ist ein Artikel, der erklärt, wie man ein PDF mit einem Blob herunterlädt: https://brmorris.blogspot.ie/2017/02/download-pdf-in-angular-2.html

Es ist das gleiche Prinzip für eine XLSX-Datei. Folgen Sie einfach den Schritten aus dem Artikel und ändern Sie zwei Dinge:

  • Kopfzeile, anstelle von {'Accept': 'application/pdf'}, verwenden Sie {'Accept': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'};
  • Blob, verwenden Sie denselben Typ für die Erstellung Ihres neuen Blob ([fileBlob], {Typ: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}).

Der Artikel verwendet File Saver, aber ich habe es nicht getan. Ich habe im Artikel einen Kommentar mit einer grundlegenden Erklärung hinterlassen, was ich anstelle von File Saver verwendet habe.

0
Arthur Almeida