Angular2 でファイルをダウンロードするにはどうすればよいですか?

Angular2 でのファイルのダウンロード

Angular2 を使用してファイルのダウンロードを実装するときに問題が発生しています。具体的には、受信したデータを保存し、ファイル保存機能をトリガーする方法を理解できません。これを Angular でどのように実現できるかを見てみましょう。

問題

コードの主な問題は、ファイルのダウンロードに使用されるオブザーバブルが別のコンテキストで実行されることです。 。これにより、window.URL.createObjectURL を使用して URL 変数を作成しようとすると、空のオブジェクトが生成されます。この問題を解決するには、objectURL が正しいコンテキスト内で構築されていることを確認する必要があります。

解決策

この問題に対する効果的な解決策の 1 つは、監視可能にし、ファイルのダウンロードを処理する別の関数にデータを渡します。これは、次のコードで実現できます:

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

downloadFile 関数は次のように定義されます:

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

この関数では、応答データを含む BLOB オブジェクトを作成し、次のように指定します。ファイルの種類。次に、objectURL を生成し、新しいウィンドウを開いてファイルをダウンロードします。

その他の考慮事項

「rxjs/Rx」モジュールがインポートされていることを確認することが重要です。正しく。 「購読」などの監視可能な機能を使用するには、コンポーネントの先頭に次の行を含める必要がある場合があります:

import 'rxjs/Rx';

結論

Byオブザーバブルをサブスクライブし、objectURL を作成する専用関数にデータを渡すと、Angular2 以降でファイルを正常にダウンロードできます。この方法を使用すると、ダウンロード プロセスをより詳細に制御し、正しいコンテキスト内でデータを処理できるようになります。

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