Angular 2下載帶驗證的.CSV文件點擊事件

我正在使用spring boot後端，並且我的api使用服務通過OutputStreamWriter發送數據。我可以在角2使用單擊事件像這樣下載此：Angular 2下載帶驗證的.CSV文件點擊事件

打字稿

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



}

我嘗試下載通過BLOB數據的建議在這篇文章： How do I download a file with Angular2

所下載的文件是類型的文件，內容是：

狀態響應：200確定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"); 



    }

來源

2016-12-05 Bhetzie

看起來像你只需要解析響應的主體即

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

此外，我會建議你使用FileSaver於2016年下載文件，甚至似乎沒有成爲一種標準的方式跨瀏覽器做到這一點。

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

要更深入指導檢查here

來源

2016-12-05 02:24:42 shusson

這是問題，謝謝！我假設我可以在我的服務中做一個地圖到文本。我會看看FileSaver.js，希望它能解決我保存爲類型文件的問題。 – Bhetzie

你碰巧知道我需要添加到我的組件來識別saveAs函數嗎？我試過： var FileSaver = require（'file-saver'）;但似乎不起作用 – Bhetzie

您使用的是什麼模塊加載器？我正在使用使用webpack的angular-cli。要包含第三方庫，可以將文件路徑添加到'angular-cli.json'中的庫中。例如，添加以下腳本：[「../node_modules/file-saver/FileSaver.js」]， – shusson

Angular 2下載帶驗證的.CSV文件點擊事件

回答

相關問題