角度2のダウンロード.CSVファイルのクリックイベントと認証

Question

私は春のブートバックエンドを使用しています。私のAPIはOutputStreamWriter経由でデータを送信するサービスを使用しています。私はそうのようなクリックイベント使用して角度2でこれをダウンロードすることができます。これは正常に動作します

活字体

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

HTML

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

を。しかし、私は最近、私のapiエンドポイントのためのセキュリティを実装しました、そして今、私はヘッダを送信していないので、私はコールをしようとするたびに401を受け取っています。

コンソールに結果が表示されるサービスを作成しましたが、ファイルをダウンロードする方法がわかりません。

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



} 

この記事で示唆されているように、私はブロブを介してデータをダウンロードしようとしました： How do I download a file with Angular2

ダウンロードされるファイルは、種類ファイルであり、内容は次のとおりです。

ステータスの返信：200 OK URL：私のURL

実際にデータをダウンロードするわけではありません。

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



    } 

Answer 1

あなただけ

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

すなわち応答の本体を解析する必要があるようにも、2016年に標準的な方法があるように思われないようまた、私はあなたがファイルをダウンロードするためにFileSaverを使用することをお勧めしますルックスブラウザー間でこれを行うには問題だったの深さ以上のガイドチェックhere