我正在使用 spring boot 后端,我的 api 使用服务通过 OutputStreamWriter 发送数据。我可以使用像这样的点击事件在 Angular 2 中下载它:
typescript
results(){
window.location.href='myapicall';
}
HTML
<button (click)="results()"
class="btn btn-primary">Export</button>
这很好用;但是,我最近为我的 api 端点实现了安全性,现在我每次尝试调用电话时都会收到 401,因为它没有发送 header 。
我写了一个可以在控制台看到结果的服务,但我似乎不知道如何下载文件。
下载文件服务
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
下载的文件类型为File,内容为:
Response with status: 200 OK for URL:my 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");
}
最佳答案
看起来你只需要解析响应的主体即
let parsedResponse = data.text();
this.downloadFile(parsedResponse);
此外,我建议您使用 FileSaver下载文件,因为即使在 2016 年,似乎也没有跨浏览器执行此操作的标准方法。
let blob = new Blob([data], { type: 'text/csv' });
saveAs(blob, "data.txt");
更深入的指南检查 here
关于javascript - 具有身份验证的Angular 2下载.CSV文件点击事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40966096/