Ajax を使用してファイルのダウンロードを非同期的にトリガーするにはどうすればよいですか?

Ajax を使用したファイルの非同期ダウンロード

Ajax を使用してファイルをダウンロードすると、通常、返されたデータはバイナリ ストリームとして表示されます。ただし、ファイルのダウンロード ウィンドウを開きたい場合は、次の手順を実行できます:

2019 最新のブラウザー アップデート

このアプローチは最新のブラウザーに推奨されます:

• フェッチ API を使用してファイルをBlob.
• window.URL.createObjectURL を使用して BLOB の一意の URL を生成します。
• を作成します。要素を追加し、その href 属性を生成された URL に設定し、download 属性を使用して目的のファイル名を指定します。
• を追加します。
• でクリック イベントを実行します。 element.
• window.URL.revokeObjectURL を使用して生成された URL を取り消します。
• ファイルがダウンロードされたことをユーザーに通知するメッセージを表示します。

コード例:

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(resp => resp.blob())
  .then(blob => {
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    a.download = 'todo-1.json';
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(url);
    alert('your file has downloaded!');
  })
  .catch(() => alert('oh no!'));

以上がAjax を使用してファイルのダウンロードを非同期的にトリガーするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。