ユーザー操作を中断せずに Ajax を使用してファイルのダウンロードをトリガーするにはどうすればよいですか?

Ajax でファイルのダウンロードを有効にする

非同期プログラミングの時代では、多くの場合、ユーザーの操作を中断せずにファイルをダウンロードする必要があります。この質問では、Ajax を使用してファイルをローカルに保存するようにユーザーに指示しながらファイルをダウンロードする方法について説明します。

提供された Struts2 アクションでは、ストリーム結果を使用してファイルをダウンロードできます。ただし、jQuery を使用してこのアクションに直接投稿すると、ブラウザー内でファイルがバイナリ ストリームとしてレンダリングされます。ファイルのダウンロード ウィンドウを起動するには、別のアプローチが必要です。

最新のブラウザ ソリューション

最新のブラウザは、より簡単なソリューションを提供します。 fetch() API を使用すると、ファイルを BLOB として取得し、ダウンロード用の一時 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;
    // Set the download filename
    a.download = 'todo-1.json';
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(url);
    alert('File download complete!');
  })
  .catch(() => alert('File download failed!'));

この方法には、fetch() API と createObjectURL() をサポートする最新のブラウザが必要です。メソッド。

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