web-dev-qa-db-fra.com

Angular 2 download .CSV file click event with authentication

J'utilise un backend Spring Boot et mon API utilise un service pour envoyer des données via un OutputStreamWriter. Je peux le télécharger dans Angular 2 en utilisant un événement de clic comme ceci:

TypeScript 

results(){
window.location.href='myapicall';
}

[~ # ~] html [~ # ~] 

<button (click)="results()"
                    class="btn btn-primary">Export</button>

Cela fonctionne très bien; cependant, j'ai récemment implémenté la sécurité pour mes points finaux api et maintenant je reçois un 401 chaque fois que j'essaie de faire l'appel parce qu'il n'envoie pas d'en-tête.

J'ai écrit un service dont je peux voir les résultats dans la console, mais je n'arrive pas à comprendre comment télécharger le fichier.

DownloadFileService 

import {Injectable} from '@angular/core';
import { Http, Headers } from '@angular/http';
import 'rxjs/Rx';

@Injectable()
export class DownloadFileService {

    headers:Headers;
    bearer: string;
    constructor(public http: Http) {}



    getFile(url:string) {
        this.bearer = 'Bearer '+ localStorage.getItem('currentUser');
        this.headers = new Headers();
        this.headers.append('Authorization', this.bearer);

        return this.http.get(url, {headers: this.headers});
    }



}

J'ai essayé de télécharger les données via un blob comme suggéré dans cet article: Comment télécharger un fichier avec Angular2

Le fichier téléchargé est de type Fichier et le contenu est:

Réponse avec état: 200 OK pour l'URL: mon URL

Il ne télécharge pas réellement les données.

downloadFile(data: any){
        var blob = new Blob([data], { type: 'text/csv' });
        var url= window.URL.createObjectURL(blob);
        window.open(url);
    }



    results(){
        // window.location.href='myapicall';   

         let resultURL =  'myapicall';

        this.downloadfileservice.getFile(resultURL).subscribe(data => this.downloadFile(data)),//console.log(data),
            error => console.log("Error downloading the file."),
            () => console.info("OK");



    }
javascriptangulartypescriptdownloadfileapi
11
Bhetzie

On dirait que vous avez juste besoin d'analyser le corps de la réponse, c'est-à-dire

let parsedResponse = data.text();
this.downloadFile(parsedResponse);

Je vous recommande également d'utiliser FileSaver pour télécharger des fichiers car même en 2016, il ne semble pas y avoir de moyen standard de le faire sur tous les navigateurs.

let blob = new Blob([data], { type: 'text/csv' });
saveAs(blob, "data.txt");

Pour un guide plus approfondi, consultez ici

10
shusson

J'utilise également FileSaver. Si vous avez une extension côté client, vous pouvez voir qu'elle fonctionnera correctement pour les fichiers CSV. Il vous suffit d'ajouter manuellement l'extension:

FileSaver.saveAs(res, 'export' + extension);
0
Mustafa Akgure