ホームページ > ウェブフロントエンド > jsチュートリアル > Angular2 以降でファイルをダウンロードする方法: ステップバイステップ ガイド

Angular2 以降でファイルをダウンロードする方法: ステップバイステップ ガイド

Patricia Arquette
リリース: 2024-11-08 11:03:02
オリジナル
656 人が閲覧しました

How to Download Files in Angular2 and Above: A Step-by-Step Guide

Angular2 以降を使用してファイルをダウンロードする方法

Angular2 では、ファイルのダウンロード方法に大幅な変更が導入されました。 Angular がファイルを保存する方法を理解することは、特に従来のバージョンで使用されていた方法に慣れている人にとっては難しい場合があります。

Angular2 でファイルをダウンロードするには、次の手順に従います。

  1. ダウンロード リクエストを処理し、返されたオブザーバブルをサブスクライブする関数。
  2. サブスクライブ コールバック内で、ダウンロードされたデータから Blob オブジェクトを作成します。
  3. URL.createObjectURL() メソッドを使用して、 BLOB の URL。
  4. 新しいウィンドウで URL を開き、ファイルのダウンロードを開始します。

実装例を以下に示します。

downloadfile(type: string){

  this.pservice.downloadfile(this.rundata.name, type)
      .subscribe(data => this.downloadFile(data),
                  error => console.log("Error downloading the file."),
                  () => console.log('Completed file download.'));
}

downloadFile(data: Response) {
  const blob = new Blob([data], { type: 'application/octet-stream' });
  const url = window.URL.createObjectURL(blob);
  window.open(url);
}
ログイン後にコピー

注:

オブザーバブルの使用を有効にするために rxjs/Rx をインポートしていることを確認してください。

以上がAngular2 以降でファイルをダウンロードする方法: ステップバイステップ ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート