クライアント側フェッチ API を使用してファイルをダウンロードするにはどうすればよいですか?

クライアント側フェッチを使用してファイルをダウンロードする方法

Web アプリケーションまたはモバイル アプリケーションを開発する場合、ファイルをリモートサーバーからユーザーのデバイスに接続します。 Fetch API の導入により、クライアント側でのファイルのダウンロードが非常に簡単になりました。

次のコード スニペットを考えてみましょう:

<code class="javascript">function downloadFile(token, fileId) {
  let url = `https://www.googleapis.com/drive/v2/files/${fileId}?alt=media`;
  return fetch(url, {
    method: 'GET',
    headers: {
      'Authorization': token
    }
  }).then(...);
}</code>

このシナリオでは、Fetch リクエストがあります。 Google ドライブからファイルを取得するように定義されています。ファイルをダウンロードするには then ブロックで何をすべきでしょうか?

追加のライブラリに依存せずに Fetch 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 => {
    var file = window.URL.createObjectURL(blob);
    window.location.assign(file);
  });</code>

このコード スニペットは、適切な URL と認証ヘッダーを使用してフェッチ リクエストを初期化します。次に、 res.blob() メソッドを使用してファイルのバイナリ データを取得します。その後、ファイルの一時オブジェクト URL を作成し、それを window.location に割り当てて、ダウンロードをトリガーします。

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