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

问题描述

我在服务器端有一个Struts2动作进行文件下载。

 < action name =downloadclass = com.xxx.DownAction > 
< result name =successtype =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调用操作时：

$ b $ （
/download.action，{
para1：value1，
para2：value2
.. ..
}，function（data）{
console.info（data）;
}
）;

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

解决方案

Bluish 对此完全正确，您无法通过Ajax进行操作，因为JavaScript无法将文件直接保存到用户的计算机（出于安全考虑）。不幸的是，在您的文件下载中指向主窗口的 URL表示您无法控制文件下载时用户体验。

I创建了 jQuery文件下载，允许使用OnSuccess和OnFailure回调来完成文件下载的Ajax体验，以提供更好的用户体验。看看我的演示的noreferrer>博客文章的jQuery文件下载操作。以下是来源

这是一个简单的用例演示，使用插件源与承诺。 演示页面还包含许多其他更好的UX示例。

  $。fileDownload（'some / file.pdf'）
 .done（function（）{alert（'File download a success！'）;} ）
 .fail（function（）{alert（'File download failed！'）;}）; 
  

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

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>

However when I call the action using the jQuery:

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

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?

解决方案

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.

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!'); });

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屋！