Observable と BLOB を使用して Angular2 でファイルをダウンロードするにはどうすればよいですか?

Angular2 によるファイルのダウンロードの処理方法

Angular2 以降では、ファイルのダウンロードには Observable と BLOB を使用してデータを取得および保存する必要があります。 Angular アプリケーションがファイルをダウンロードする特定のシナリオを見てみましょう。

問題の理解

ユーザーが Angular2 クライアントでファイル ダウンロード機能を実装するときに問題が発生しました。 WebApi/MVC アプリ。リクエストは正しく設定されていますが、Angular がファイルの保存をどのように管理するかを理解するのに苦労しています。

解決策

この問題は、ファイルのダウンロードを処理する Observable が実行されるために発生します。別のコンテキストで。これにより、目的の BLOB ではなく、空のオブジェクトが URL 変数に渡されます。

これに対処するには、解決策として、データを応答として指定された関数に直接渡す方法で Observable をサブスクライブする必要があります。例:

this._reportService.getReport().subscribe(data => this.downloadFile(data));

downloadFile 関数内で、応答データを使用して BLOB が作成されます。

downloadFile(data: Response) {
  const blob = new Blob([data], { type: 'text/csv' });
  const url = window.URL.createObjectURL(blob);
  window.open(url);
}

サブスクリプションと BLOB の作成を個別に処理することで、正しいコンテキストが確立されます。 、URL 変数に目的の BLOB が含まれていることを確認します。

追加の考慮事項

ファイルを正常に開くには、「rxjs/Rx」がimport:

import 'rxjs/Rx';

この解決策は、Observable と BLOB の作成が発生するコンテキストを適切に処理することで問題を解決します。これにより、Angular2 アプリケーションがファイルを効果的にダウンロードできるようになります。

以上がObservable と BLOB を使用して Angular2 でファイルをダウンロードするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。