ホームページ >ウェブフロントエンド >jsチュートリアル >クライアント側アプリケーションで window.fetch() を使用してファイルをダウンロードするにはどうすればよいですか?
クライアント側アプリケーションの 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 サイトの他の関連記事を参照してください。