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

Question

我想使用jQuery从我的浏览器下载并保存文件,特别是Ajax调用.

我发现这篇文章:使用Javascript/jQuery下载文件,并测试了Andrew Dunn提供的隐藏iFrame的解决方案.在一个简单的情况下它工作,服务器播放良好,提供内容配置:附件; ...标题,我得到另存为弹出窗口,一切正常.

但是我的情况更复杂:假设请求不仅仅是一个简单的URL; 必须提供额外的请求标头,可能它甚至不是GET方法,而是具有一些奇特的JSON有效负载的POST.这意味着我应该能够"替换"浏览器的内置get页面机制并提供我的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,发送回文件,回复具有与简单情况相同的Content Disposition标头...但是我没有得到Save Us弹出窗口,下载的文件只是"消失".顺便说一句,它甚至没有在iFrame中渲染,因为测试我使框架可见并且没有任何东西被加载到那里.

我有一种感觉,缺少一些非常微不足道的东西.也许我需要对返回的数据做点什么......有什么想法吗？如果你对这个问题有更好的解决方法,我也将不胜感激.

Answer 1

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

在这种情况下，您只需将当前页面重定向到该网址即可。由于它不是 html 页面，因此会触发浏览器的下载机制。

我正在更新

获取URL

功能。

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