javascript – Angular 2下载带有身份验证的.CSV文件点击事件

2019-10-06 18:40:36 阅读：212 来源： 互联网

标签：javascript angular typescript download fileapi

我正在使用spring boot后端,而我的api使用服务通过OutputStreamWriter发送数据.我可以使用像这样的点击事件在Angular 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});
    }



}

我尝试通过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,typescript,download,fileapi
来源： https://codeday.me/bug/20191006/1861694.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – Angular 2下载带有身份验证的.CSV文件点击事件