Question

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

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

但是我的情况更复杂：假设请求不仅仅是一个简单的URL;必须提供额外的请求标头，可能它甚至不是GET方法，而是具有一些奇特的JSON有效负载的POST。这意味着我应该能够更换＆＃34;浏览器的内置获取页面机制，并提供我的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弹出窗口，下载的文件只是＆＃34;消失＆＃34;。顺便说一句，它甚至没有在iFrame中渲染，因为测试我使框架可见并且没有任何内容被加载。

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

Answer 1

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

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

我正在更新

的getURL

功能

T get()

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

1 个答案: