Angular2 で WebApi/MVC アプリからファイルを正常にダウンロードするにはどうすればよいですか?

Angular2 を使用した効果的なファイルのダウンロード

Angular2 アプリケーションで、WebApi / MVC アプリからダウンロードしたファイルを保存するときに問題が発生しました。問題を詳しく調べて解決策を提供しましょう。

コンポーネントのコードは、提供されているように、Blob() コンストラクターを利用して、受信したデータからファイルを作成します。ただし、現在の ECMAScript 仕様では使用できない URL.createObjectURL 関数に関する課題に直面します。

解決策は、Angular2 内のオブザーバブルの性質に由来します。ファイルのダウンロードに使用されるオブザーバブルが別のコンテキストで実行されるため、発生する問題が発生します。これに対処するには、オブザーバブルをサブスクライブするようにコードを変更し、そのサブスクリプション内でファイルの作成と保存のロジックを実行する必要があります。

効果的なアプローチの 1 つは、オブザーバブルをサブスクライブするように downloadfile() メソッドをリファクタリングすることです。

downloadfile(type: string){
  this.pservice.downloadfile(this.rundata.name, type)
    .subscribe(data => {
      this.downloadFile(data); // Call a separate function to handle file creation and saving
    },
    error => console.log("Error downloading the file."),
    () => console.log('Completed file download.'));
}

この更新されたメソッドでは、ファイルの作成とダウンロードの開始を担当する新しい downloadFile() 関数が導入されています。

downloadFile(data: Response) {
  const blob = new Blob([data], { type: "application/octet-stream" });
  const url = window.URL.createObjectURL(blob);
  window.open(url);
}

オブザーバブルをサブスクライブすることにより、そして、downloadFile() 関数を定義すると、ファイルの作成と保存が正しいコンテキスト内で行われるようになり、ダウンロードしたファイルを正常に保存して開くことができるようになります。

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