47

在我们的应用程序中，我们需要实现以下场景：

  1. 从客户端发送请求
  2. 服务器处理请求并生成文件
  3. 服务器返回文件作为响应
  4. 客户端浏览器显示文件下载弹出对话框并允许用户下载文件

我们的应用程序是基于 ajax 的应用程序，因此我们发送 ajax 请求（如使用jquery.ajax()函数）将非常容易和方便。

但是在 googilng 之后，事实证明只有在使用非 ajax POST 请求时才可以下载文件（就像在这个流行的 SO 线程中描述的那样）。所以我们需要实现更丑陋和更复杂的解决方案，需要构建form带有嵌套隐藏字段的 HTML 结构。

有人可以用简单的话解释为什么不能使用ajax请求来下载文件吗？这背后的机制是什么？

4

4 回答 4

59

这与 AJAX 无关。当然，您可以使用 AJAX 下载文件。但是文件将保存在内存中，即您不能将文件保存到磁盘。这是因为 JavaScript 无法与磁盘交互。这将是一个严重的安全问题，并且在所有主要浏览器中都被阻止。

于 2013-02-04T08:52:46.127 回答
3

这可以使用称为 Blob 的新 HTML5 功能来完成。有一个库FileSaver.js可以用作该功能之上的包装器。

于 2015-07-17T13:57:55.370 回答
1

这是我两天前问自己的同一个问题。有一个项目，客户端使用 ExtJS 编写，服务器端实现在 ASP.Net 上。我必须将服务器端翻译成 Java。有一个下载 XML 文件的功能，该文件是服务器在客户端发出 Ajax 请求后生成的。我们都知道，Ajax 请求后不可能下载文件，只是存储在内存中。但是...在原始应用程序浏览器中显示通常的对话框，其中包含打开、保存和取消下载的选项。ASP.Net 以某种方式改变了标准行为......我花了两天时间再次证明 - 没有办法通过通常的方式请求下载文件......唯一的例外是 ASP.Net......这里是 ASP.Net代码

public static void WriteFileToResponse(byte[] fileData, string fileName)
    {
        var response = HttpContext.Current.Response;

        var returnFilename = Path.GetFileName(fileName);
        var headerValue = String.Format("attachment; filename={0}", 
            HttpUtility.UrlPathEncode(
                String.IsNullOrEmpty(returnFilename) 
                    ? "attachment" : returnFilename));
        response.AddHeader("content-disposition", headerValue);
        response.ContentType = "application/octet-stream";
        response.AddHeader("Pragma", "public");

        var utf8 = Encoding.UTF8;
        response.Charset = utf8.HeaderName;
        response.ContentEncoding = utf8;
        response.Flush();
        response.BinaryWrite(fileData);
        response.Flush();
        response.Close();
    }

这个方法是从 WebMethod 调用的，而 WebMethod 又是从 ExtJS.Ajax.request 调用的。这就是魔法。对我来说是什么，我以 servlet 和隐藏的 iframe 结束......

于 2013-02-04T09:30:12.783 回答
-3

您可以通过在下载页面中使用隐藏的 iframe 来做到这一点

只需在您的ajax成功响应中设置隐藏的ifame的src，您的任务就完成了......

  $.ajax({
        type: 'GET',
        url: './page.php',
        data: $("#myform").serialize(),
        success: function (data) {
          $("#middle").attr('src','url');
        },

});
于 2014-03-17T13:36:49.327 回答