Angular 2 下载 .CSV 文件点击事件带认证

Question

我正在使用 spring 启动后端，我的 api 使用服务通过 OutputStreamWriter 发送数据。我可以使用像这样的点击事件在 Angular 2 中下载它：

打字稿

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



}

我尝试按照 post 中的建议通过 blob 下载数据：

下载的文件类型为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");



    }

Answer 1

看起来您只需要解析响应的主体即

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

此外，我建议您使用 FileSaver 下载文件，因为即使在 2016 年，似乎也没有跨浏览器执行此操作的标准方法。

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

更深入的指南检查here

Answer 2

我也用 FileSaver。如果您在客户端有扩展，您可以看到它对 CSV 个文件可以正常工作。您只需要手动添加扩展名：

FileSaver.saveAs(res, 'export' + extension);

Angular 2 下载 .CSV 文件点击事件带认证

Angular 2 download .CSV file click event with authentication

javascript

download

fileapi

typescript

angular