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

I would like to download and save a file from my browser, using jQuery, in particular an Ajax call.

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

I found this post: Download File Using Javascript/jQuery and tested the solution provided by Andrew Dunn with the hidden iFrame. In a simple case it works, the server plays well, provides the Content-Disposition: attachment; ... header, I get the Save As pop-up and everything works fine.

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

However my situation is more complicated: suppose that the request is more than just a simple URL; additional request headers has to be supplied, maybe it is not even a GET method but a POST with some fancy JSON payload. This means that I should be able to "replace" the browser's built-in get page mechanism and provide my AJAX request instead.

但是我的情况更复杂：假设请求不仅仅是一个简单的URL;必须提供额外的请求标头，可能它甚至不是GET方法，而是具有一些奇特的JSON有效负载的POST。这意味着我应该能够“替换”浏览器的内置get页面机制，并提供我的AJAX请求。

For the sake of simplicity let's suppose that I just need to provide a Basic Authentication header with the request. But keep in mind, that I might need more complex requests.

为简单起见，我们假设我只需要为请求提供基本身份验证标头。但请记住，我可能需要更复杂的请求。

I am not deeply familiar with JavaScript and jQuery, so I was frantically googling around and finally found an almost solution. The idea:

我对JavaScript和jQuery并不十分熟悉，所以我疯狂地在谷歌上搜索，最后找到了一个几乎解决方案。想法：

Add a hidden iframe to the page.
向页面添加隐藏的iframe。
Add a Form into the frame.
将表单添加到框架中。
Define a submit function of the form, that will call my AJAX function, where I can add the required authentication (or any other required header, ...)
定义表单的提交函数，它将调用我的AJAX函数，在那里我可以添加所需的身份验证（或任何其他必需的头，...）
Invoke submit programmatically
以编程方式调用提交

Here is the relevant code pieces:

以下是相关代码：

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;
}

As I mentioned, everything almost works! With FireBug I can see, that the request is made, the server replies with 200, sends back the file, the reply has the same Content Disposition header as in the simple case ... But I do not get the Save Us pop-up, the downloaded file just "disappears". BTW, it is not even rendered in the iFrame, for testing I made the frame visible and nothing gets loaded there.

正如我所提到的，一切几乎都有效！使用FireBug我可以看到，请求已经完成，服务器回复200，发回文件，回复具有与简单情况相同的内容处理标题...但我没有得到Save Us弹出窗口，下载的文件只是“消失”。顺便说一句，它甚至没有在iFrame中渲染，因为测试我使框架可见并且没有任何东西被加载到那里。

I have a feeling, that something very trivial is missing. Maybe I need to do something with the data returned ... Any idea? I would also appreciate if you have a better approach for this problem.

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

1 个解决方案

#1

@Istvan Klss The answer I'm providing is based on the assumption that the URL directly points to the file (or generated file ) in the server.

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

In that case you can simply redirect your current page to that url. Since it's not an html page, it will fire the browser's download mechanism.

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

I'm updating the

我正在更新

getURL

的getURL

function.

功能。

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

#1