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");
}
这是问题,谢谢!我假设我可以在我的服务中做一个地图到文本。我会看看FileSaver.js,希望它能解决我保存为类型文件的问题。 – Bhetzie
你碰巧知道我需要添加到我的组件来识别saveAs函数吗?我试过: var FileSaver = require('file-saver');但似乎不起作用 – Bhetzie
您使用的是什么模块加载器? 我正在使用使用webpack的angular-cli。要包含第三方库,可以将文件路径添加到'angular-cli.json'中的库中。例如,添加以下脚本:[“../node_modules/file-saver/FileSaver.js”], – shusson