通过 jQuery.Ajax 下载文件 [英] Download a file by jQuery.Ajax

问题描述

我在服务器端有一个用于文件下载的 Struts2 动作.

I have a Struts2 action in the server side for file downloading.

<action name="download" class="com.xxx.DownAction">
    <result name="success" type="stream">
        <param name="contentType">text/plain</param>
        <param name="inputName">imageStream</param>
        <param name="contentDisposition">attachment;filename={fileName}</param>
        <param name="bufferSize">1024</param>
    </result>
</action>

但是，当我使用 jQuery 调用操作时:

However when I call the action using the jQuery:

$.post(
  "/download.action",{
    para1:value1,
    para2:value2
    ....
  },function(data){
      console.info(data);
   }
);

在 Firebug 中，我看到使用 二进制流 检索数据.我想知道如何打开用户可以在本地保存文件的文件下载窗口?

in Firebug I see the data is retrieved with the Binary stream. I wonder how to open the file downloading window with which the user can save the file locally?

推荐答案

2019 现代浏览器更新

这是我现在推荐的方法，但有一些注意事项:

This is the approach I'd now recommend with a few caveats:

• 需要一个相对现代的浏览器
• 如果文件预计非常大，您可能应该执行与原始方法(iframe 和 cookie)类似的操作，因为以下某些操作可能消耗的系统内存至少为正在下载的文件和/或其他有趣的 CPU 副作用.

• A relatively modern browser is required
• If the file is expected to be very large you should likely do something similar to the original approach (iframe and cookie) because some of the below operations could likely consume system memory at least as large as the file being downloaded and/or other interesting CPU side effects.

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;
    // the filename you want
    a.download = 'todo-1.json';
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(url);
    alert('your file has downloaded!'); // or you know, something with better UX...
  })
  .catch(() => alert('oh no!'));

2012 原始的基于 jQuery/iframe/Cookie 的方法

Bluish 完全正确，你不能通过 Ajax 做到这一点，因为 JavaScript 不能将文件直接保存到用户的计算机(出于安全考虑).不幸的是，将主窗口的 URL 指向您的文件下载意味着您​​几乎无法控制文件下载时的用户体验.

Bluish is completely right about this, you can't do it through Ajax because JavaScript cannot save files directly to a user's computer (out of security concerns). Unfortunately pointing the main window's URL at your file download means you have little control over what the user experience is when a file download occurs.

我创建了 jQuery 文件下载，它允许通过 OnSuccess 和 OnFailure 回调完成文件下载的类似 Ajax"的体验，以提供更好的用户体验.看看我的 博客文章 关于插件解决的常见问题和使用它的一些方法，还有一个 demojQuery 文件下载的操作.这是源

I created jQuery File Download which allows for an "Ajax like" experience with file downloads complete with OnSuccess and OnFailure callbacks to provide for a better user experience. Take a look at my blog post on the common problem that the plugin solves and some ways to use it and also a demo of jQuery File Download in action. Here is the source

这是一个使用插件的简单用例演示 来源 与承诺.演示页面还包括许多其他更好的用户体验"示例.

Here is a simple use case demo using the plugin source with promises. The demo page includes many other, 'better UX' examples as well.

$.fileDownload('some/file.pdf')
    .done(function () { alert('File download a success!'); })
    .fail(function () { alert('File download failed!'); });

根据您需要支持的浏览器，您可以使用 https://github.com/eligrey/FileSaver.js/ 允许比 jQuery File Download 使用的 IFRAME 方法更明确的控制.

Depending on what browsers you need to support you may be able to use https://github.com/eligrey/FileSaver.js/ which allows more explicit control than the IFRAME method jQuery File Download uses.

这篇关于通过 jQuery.Ajax 下载文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！