使用jQuery Ajax调用下载并保存文件

Question

我想使用jQuery从浏览器下载并保存文件，特别是通过Ajax请求。我找到了这篇文章：Download File Using Javascript/jQuery 并测试了由Andrew Dunn提供的使用隐藏iFrame的解决方案，在简单情况下它可以工作，服务器很好地提供Content-Disposition: attachment; ...头，我得到了“另存为”弹出窗口，一切正常。但是我的情况更加复杂：假设请求不仅仅是一个简单的URL；可能需要提供其他请求头，甚至不是GET方法，而是带有一些花哨JSON负载的POST。这意味着我应该能够“替换”浏览器内置的获取页面机制，并提供我的AJAX请求。为了简单起见，假设我只需要在请求中提供基本身份验证标头。但请记住，我可能需要更复杂的请求。我对JavaScript和jQuery不是非常熟悉，所以我疯狂地搜索并最终找到了一个几乎解决方案的想法：

• 将一个隐藏的iframe添加到页面中。
• 在框架中添加一个表单。
• 定义表单的提交函数，该函数将调用我的AJAX函数，在其中我可以添加所需的身份验证（或任何其他所需的标头...）
• 以编程方式调用提交

下面是相关的代码片段：

function getFile(url)
{

//Creating the iframe
  iframe = document.createElement('iframe');
  iframe.id = hiddenIFrameID;
  iframe.style.display = 'none';
  document.body.appendChild(iframe);

// Adding the form to the frame
  var externalHtml = '<form id="downloadForm" action="javascript: void(0);"></form>';
  $(document.getElementById(hiddenIFrameID)).contents().find('body').html(externalHtml);
  var formObj = $(document.getElementById(hiddenIFrameID));
  var form = formObj.contents().find('#downloadForm');

// set the submit action to call my ajax function
  form.submit(function () { getURL(url); });

// execute form's submit
  form.submit();
}

function getURL(url)
{
  var response;
  var jqXHR =
    $.ajax(
      {
        type: "GET",
        url: url,
        async: false,
       // authentication, etc
      }
    );
  jqXHR.done( function (data) { response = data;});
  return response;
}

如我所提到的，几乎一切都可以工作！ 通过FireBug，我可以看到请求已经发出，服务器响应200，发送回文件，回复具有与简单情况相同的内容分配标头...但是我没有得到“保存我们”弹出窗口，下载的文件只是“消失”了。顺便说一下，它甚至没有在iFrame中呈现，为了测试，我使框架可见，但是那里没有加载任何内容。

我有一种感觉，可能缺少一些非常微不足道的东西。也许我需要对返回的数据进行某些操作...有什么想法吗？如果您有更好的解决方法，我也会很感激。

- Istvan Kiss

---

文件类型是什么？如果是PDF，则可能会在隐藏的iframe中显示。尝试使用不同的文件类型，看看是否有所改变？ - JBS

Answer 1

@Istvan Klss 我提供的答案是基于URL直接指向服务器上的文件（或生成的文件）的假设。

在这种情况下，您可以简单地将当前页面重定向到该URL。 由于它不是HTML页面，它将触发浏览器的下载机制。

我正在更新

getURL

函数。

function getURL(url)
{
  window.location.href = url;
}

- Smooth Ride