如何使用 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中文网其他相关文章！