Javascript Girl
  1. Javascript Girl
  3. Angular 2 télécharger .CSV file click event avec authentification
Intereting Posts
Convertir l'heure JS en date de MySQL Comment puis-je ouvrir une Fancybox après la fermeture? "Vous pouvez avoir besoin d'un chargeur approprié pour gérer ce type de fichier" avec Webpack et Babel Modèle de vue imbriqué Knockout Protégez les scripts Greasemonkey? Où dois-je déclarer les fichiers JavaScript utilisés dans ma page? Dans <head> </ head> ou près </ body>? Existe-t-il un moyen de multiplier correctement 32 entiers 32 bits en version JavaScript? Crypto-Js sortie différente de mcrypt Comment ajouter le zoom dans les boutons de zoom en visjs en utilisant angularjs? Mpld3: Comment changer l'emplacement de la barre d'outils à l'aide d'un plugin? Le but de l'opérateur de virgule en JavaScript (x, x1, x2, …, xn) Insertion des résultats MYSQL de PHP dans la matrice Javascript La fonction JQquery .load () ne fonctionne pas sur Chrome? Comment détecter l'événement du bouton Précédent du navigateur – Cross Browser Barre flottante avec jQuery

Angular 2 télécharger .CSV file click event avec authentification

J'utilise un backend de démarrage de printemps et mon api utilise un service pour envoyer des données via OutputStreamWriter. Je peux télécharger cela dans Angular 2 à l'aide d'un événement de clic comme ceci:

Manuscrit 

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 mis en place la sécurité pour mes points d'extrémité api et maintenant je reçois un 401 chaque fois que j'essaie de faire l'appel car il n'émet pas d'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 télécharger le fichier.

TéléchargerFileService 

 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 cette publication: Comment puis-je télécharger un fichier avec Angular2

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

Réponse avec statut: 200 OK pour 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"); }

On dirait que vous devez simplement analyser le corps de la réponse, c'est-à-dire 

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

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

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

Pour un guide plus approfondi, vérifiez ici