ホームページ  >  記事  >  ウェブフロントエンド  >  クライアント側アプリケーションで window.fetch() を使用してファイルをダウンロードするにはどうすればよいですか?

クライアント側アプリケーションで window.fetch() を使用してファイルをダウンロードするにはどうすればよいですか?

DDD
DDDオリジナル
2024-10-23 07:27:30614ブラウズ

How to Download Files with window.fetch() in Client-Side Applications?

クライアント側アプリケーションの Window.fetch() を使用したファイルのダウンロード

クライアント側でファイルのダウンロードを処理する場合、window.fetch () は、これらの操作を処理するための強力なツールを提供します。ただし、次のような疑問が生じます: ファイルをダウンロードするには then ブロックで何をすべきですか?

解決策:

then ブロック内で、応答を次のように処理する必要があります。ファイルの内容を取得します。ここでは、外部ライブラリを必要とせずにフェッチ API を利用する、より簡潔で効率的なソリューションを示します。

<code class="javascript">const url = 'http://sample.example.file.doc';
const authHeader = "Bearer 6Q************";

const options = {
  headers: {
    Authorization: authHeader
  }
};

fetch(url, options)
  .then(res => res.blob())
  .then(blob => {
    const file = window.URL.createObjectURL(blob);
    window.location.assign(file);
  });</code>

このコードでは、リクエストは適切な認証ヘッダーを使用して行われます。次に、応答はファイルのバイナリ データを表す BLOB に変換されます。最後に、window.URL.createObjectURL() を使用して、BLOB の URL が生成され、window.location.assign() を使用してファイルをダウンロードします。

このアプローチに従うことで、開発者は簡単にダウンロードできます。クライアント側アプリケーションで window.fetch() を使用してリモート サーバーからファイルを取得します。

以上がクライアント側アプリケーションで window.fetch() を使用してファイルをダウンロードするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。