web-dev-qa-db-ja.com

Angular 2認証付き.CSVファイルクリックイベントをダウンロード

私はスプリングブートバックエンドを使用しており、APIはサービスを使用してOutputStreamWriter経由でデータを送信します。これをAngular 2のようにクリックイベントを使用してダウンロードできます。

TypeScript

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



}

この投稿で提案されているように、ブロブ経由でデータをダウンロードしようとしました： Angular2でファイルをダウンロードするにはどうすればよいですか

ダウンロードされるファイルのタイプはFileで、コンテンツは次のとおりです。

URL：my urlの応答：200 OK

実際にはデータをダウンロードしません。

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



    }
javascriptangulartypescriptdownloadfileapi
11
Bhetzie

応答の本文を解析するだけでいいようです、つまり

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

また、ファイルをダウンロードするには FileSaver を使用することをお勧めします。2016年でも、ブラウザ間でこれを行う標準的な方法はないようです。

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

より詳細なガイドを確認するには、 here

10
shusson

FileSaverも使用します。クライアント側に拡張機能がある場合、CSVファイルに対して適切に機能することがわかります。拡張機能を手動で追加するだけです。

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