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文件点击事件

回答

相关问题