typescript - ladda ner xlsx-fil i angular 2 med blob

Jag vill ladda ner en xlsx-fil från klienten i Angular 2 med hjälp av REST API.

Jag får en byte-array som svar från min GET-förfrågan och skickar den till nedladdningsfunktionen med subscribe:

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

ladda ner funktion med blob:

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

Mitt problem är att min fil är korrupt hela tiden. Jag har provat många versioner av detta men inget fungerar.

** försökte också med denna lösning och det fungerar inte (xlsx-filen är fortfarande korrupt) - Angular 2 laddar ner en fil: korrupt resultat, skillnaden är att mina data är en ArrayBuffer och inte en sträng eller JSON, och det finns en skillnad mellan PDF och xlsx.

10x!

Svar #1

Jag hade samma problem som du - löste det genom att lägga till responseType: ResponseContentType.Blob i mina Get-alternativ. Kolla koden nedan:

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));
}

saveAsBlob() är bara ett omslag för 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);
}

Svar #2

Efter att inget fungerar. Jag ändrade min server för att returnera samma byte-array med tillägget av:

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

Hos min klient tog jag bort nedladdningsfunktionen och istället för GET-delen gjorde jag:

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

Detta är det enda sättet jag har funnit möjligt att spara en xlsx-fil som inte är korrupt.

Om du har ett svar på hur man gör det med blob får du gärna berätta :)

Relaterade artiklar