Angular2 アプリケーションに簡単なファイル ダウンロードを実装するにはどうすればよいですか?

Angular2 ファイルのダウンロードが簡単になりました

WebApi または MVC アプリ用の Angular2 クライアントを開発する場合、ファイルの保存を理解するのは困難な場合があります。このチュートリアルでは、Angular2 以降でファイル保存をトリガーするプロセスについて説明します。

Angular2 では、リクエスト処理の観察可能な性質に微妙な工夫が加えられています。ファイルを正常にダウンロードするには、オブザーバブルのコールバック関数内でファイル URL オブジェクトを作成する必要があります。これにより、URL の作成時にファイル データが利用可能になります。

たとえば、次のコード スニペットは、ファイルのダウンロードを処理する方法を示しています。

this._reportService.getReport().subscribe(data => this.downloadFile(data)),//console.log(data),
                 error => console.log('Error downloading the file.'),
                 () => console.info('OK');

ここでは、_reportService.getReport( ) 呼び出しはオブザーバブルを返します。リクエストが完了すると、downloadFile 関数がファイル データとともに呼び出されます。

downloadFile 内で、受信したデータから Blob オブジェクトを作成し、その MIME タイプを指定します。

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

With Blob オブジェクトが作成されたら、createObjectURL を使用してダウンロード可能な URL を生成できます。最後に、window.open(url) がファイルの保存をトリガーします。

結論として、オブザーバブルのコールバック関数内でファイルのダウンロードを処理することで、ダウンロードされたデータに適切なタイミングでアクセスできるようになります。これにより、Angular2 アプリケーションでシームレスなファイル ダウンロード機能を簡単に提供できるようになります。

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