Angulaire 2 téléchargement .Fichier CSV, cliquez sur événement avec authentification
Je suis l'aide d'un ressort de démarrage backend et mon api utilise un service pour envoyer des données via un OutputStreamWriter. Je peux télécharger ce Angulaire 2 à l'aide d'un événement de clic comme suit:
Tapuscrit
results(){
window.location.href='myapicall';
}
HTML
<button (click)="results()"
class="btn btn-primary">Export</button>
Cela fonctionne bien; cependant, j'ai récemment mis en œuvre de la sécurité pour mon api points de terminaison et maintenant, je suis à la réception d'un 401 chaque fois que j'essaie de faire l'appel, car il n'est pas de l'envoi d'un en-tête.
J'ai écrit un service que je peux voir les résultats dans la console, mais je n'arrive pas à comprendre comment faire pour 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 par l'intermédiaire d'un blob comme il est suggéré dans ce post:
Comment puis-je télécharger un fichier avec Angular2
Le fichier qui est téléchargé est de type de Fichier et le contenu est:
Réponse avec l'état: 200 OK pour l'URL:l'adresse de ma page
Il ne fait pas de télécharger 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");
}
OriginalL'auteur Bhetzie | 2016-12-05
Vous devez vous connecter pour publier un commentaire.
Ressemble vous avez juste besoin d'analyser le corps de la réponse que j'ai.e
Aussi je vous recommande d'utiliser FileSaver de téléchargement de fichiers même en 2016 il ne semble pas être un moyen standard pour ce faire dans les navigateurs.
Pour un plus en profondeur guide de vérifier ici
Savez-vous ce que je dois ajouter à mon composante de reconnaître la saveAs fonction? J'ai essayé: var FileSaver = require('fichier-saver"); mais ne semble pas fonctionner
ce chargeur de module que vous utilisez? Je suis en utilisant angulaires-cli qui utilise webpack. Pour inclure 3ème partie libs vous ajoutez le chemin d'accès du dossier lib dans
angular-cli.json
. e.g Ajouter le", "scripts": ["../node_modules/file-saver/FileSaver.js"],Je suis à l'aide de la angular2 graine: github.com/mgechev/angular-seed je l'ai ajouté à mon projet de config et essayé d'ajouter le typings via npm i @types de fichiers/-veille-enregistrer
En fait, mon IDE était juste de lancer une erreur
OriginalL'auteur shusson
- Je utiliser
FileSaver
, trop. Si vous avez l'extension côté client, vous pouvez voir que cela va fonctionner correctement pourCSV
fichiers. Vous avez juste besoin d'ajouter l'extension manuellement:OriginalL'auteur Mustafa Akgure