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

Posted 2023-02-19

【中文标题】使用 jQuery Ajax 调用下载和保存文件

【英文标题】：Download and Save File Using jQuery Ajax call

【发布时间】：2014-04-27 15:20:12

【问题描述】：

我想从我的浏览器下载并保存一个文件，使用 jQuery，尤其是 Ajax 调用。

我找到了这篇文章：Download File Using javascript/jQuery，并使用隐藏的 iFrame 测试了 Andrew Dunn 提供的解决方案。在一个简单的情况下，它可以正常工作，服务器运行良好，提供 Content-Disposition: 附件； ... 标题，我得到另存为弹出窗口，一切正常。

但是我的情况更复杂：假设请求不仅仅是一个简单的 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，发回文件，回复与简单情况下具有相同的 Content Disposition 标头......但我没有收到 Save Us 弹出窗口，下载的文件就“消失”了。顺便说一句，它甚至没有在 iFrame 中呈现，为了测试，我使框架可见，并且没有加载任何内容。

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

【问题讨论】：

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

【参考方案1】：

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

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

我正在更新

获取网址

功能。

function getURL(url)

  window.location.href = url;