web-dev-qa-db-fra.com

Comment télécharger correctement le fichier Excel avec Angular2

C'est le code de mon service qui fait post request avec response un fichier xls:

exportInternalOrder(body) {
        let user_token: string = this.sessionService.getToken();
        let headers = new Headers();
        headers.append('responseType', 'arraybuffer');
        headers.append('Authorization', 'Bearer ' + user_token);
        return this.http.post(this.config.exportInternalOrder, body,{
            headers: headers
        }).map(res => new Blob([res._body],{ type: 'application/vnd.ms-Excel' }));
    }

Ce qui est supposé gérer la réponse du fichier Excel . C'est le code qui l'invoque:

let objToSend = this.makeObjToSend(false);
this.reportingService.exportExcel(objToSend)
    .subscribe(
        data => {
            this.exportData(data);
        },
        error => {
            this.errorFilterMsg.Push({ severity: 'error', detail: 'Report exporting has failed!' });
        }
);

Et ceci est la sauvegarde du fichier (pour une raison quelconque, window.open ne fait rien):

exportData(data){       
        let blob = data;
        let a = document.createElement("a");
        a.href = URL.createObjectURL(blob);
        a.download = 'fileName.xls';
        document.body.appendChild(a);
        a.click();        
    }

Mais le fichier enregistre toujours comme corrompu. Tout en utilisant postman et curl cela vient bien. Toute aide serait appréciée.

excelangularcontent-typeangular2-http
4
Abhishek Subradeep

responseType ne devrait pas être défini dans headers, il fait partie de l’objet RequestOptionsArgs qui est passé comme deuxième argument dans la fonction post et RequestOptionsArgs contient headers, responseType et autres, vous pouvez en savoir plus ici . Donc, votre code devrait ressembler à ceci:

import { ResponseContentType } from '@angular/http';

exportInternalOrder(body) {
    let user_token: string = this.sessionService.getToken();
    let headers = new Headers();
    headers.append('Authorization', 'Bearer ' + user_token);
    return this.http.post(this.config.exportInternalOrder, body,{
        headers: headers,
        responseType: ResponseContentType.Blob
    }).map(res => new Blob([res._body],{ type: 'application/vnd.ms-Excel' }));
}
15
Stefan Svrkota

J'écris ceci..il sera utile pour les autres personnes à la recherche de la solution Angular 2 pour la fonctionnalité de téléchargement de fichier. Le morceau de code ci-dessous fonctionne pour moi.

import { ResponseContentType } from '@angular/http';

exportInternalOrder(body) {
    let user_token: string = this.sessionService.getToken();
    let headers = new Headers();
    headers.append('Authorization', 'Bearer ' + user_token);
    return this.http.post(this.config.exportInternalOrder, body,{
        headers: headers,
        responseType: ResponseContentType.Blob}).map(res => new Blob([res.blob()],{ type: 'application/vnd.ms-Excel' }));
}
1
Leni MadiReddy