Ajax 文件下载问题答案

【问题标题】：Ajax File download IssueAjax 文件下载问题
【发布时间】：2010-12-05 01:19:47
【问题描述】：

我正在我的应用程序中下载一个动态文件，使用 iframe 模拟 ajax。我正在做的是，当发出下载请求时，我将创建一个动态的不可见 iframe，并将我的 iframe 的 src 设置为下载 url。我能够成功下载文件，但要求是显示下载下载开始后的指示器，并且在下载对话框出现后应该立即完成。我在 iframe 创建后提供回调以显示下载指示器，该指示器正在成功工作，并在 iframe 的“onload”上提供了另一种方法，期待当下载对话框出现时，它将被调用。但不幸的是，这不起作用，因此即使在下载完成后，我的进度指示器仍然存在。我无法删除它。然后我意识到，由于响应的内容类型不是 html，它将由一个单独的进程提供服务，这会导致下载对话框，因此我的 onload 方法永远不会被调用。请告诉我一个解决方案。

【问题讨论】：

标签： html ajax iframe download

【解决方案1】：

您可以使用 Flash 下载管理器 - 谷歌会显示其中的一大堆。

您的另一个选择是使用真正的 AJAX。只需向下载 URI 发出请求，当您收到响应时，请使用 responseBody 而不是 XMLHTTPRequest 对象的 responseText 属性。

您需要一种将其写入硬盘驱动器的方法，这可以在具有宽松安全约束的 IE 和 ActiveXObject "Scripting.FileSystemObject" 中完成您也许可以使用数据 uri 方法：http://en.wikipedia.org/wiki/Data_URI_scheme 和base64 编码，但我不确定这是否可行。

否则，您将返回闪存将通过 ajax 下载的数据写入磁盘。

如果您知道动态下载的大小并且规范中不需要确切的时间，那么您可以在下载之前进行网速检查，在计算出的下载文件所需的时间中添加一些缓冲时间，并且只显示给定时间段的对话框。非常骇人听闻，但话说回来，这个计划似乎有点营销要求它成为它应该成为的

【讨论】：

【解决方案2】：

看看这个，可能对你有帮助

http://code.msdn.microsoft.com/AjaxFileDownload

【讨论】：

【解决方案3】：

看看这个，可能对你有帮助

http://bytes.com/topic/javascript/answers/610641-file-download-ajax

【讨论】：

这就是我一直在寻找的。谢谢！ :)

【解决方案4】：

您应该在发出下载请求时在客户端中启动一个计时器，以指定的时间间隔测试 iframe 的状态：

if ( ( iframe.document && iframe.document.readyState == 'complete' )
    || iframe.contentDocument )
{
    stopTimer();
    closePopupDialog();
}

【讨论】：

上面一个非常接近解决方案，但就我而言，即使在下载后，readyState 也从未达到“完成”，它仍然处于“交互”状态。知道可能是什么问题吗？ ?
刚刚知道，内容处置在其中发挥了作用。查看 this
此方法不幸不起作用，因为跨浏览器的 readyState 行为不稳定。例如 Chrome 永远不会改变。

【解决方案5】：

我创建了jQuery File Download plugin (Demo)，它也解决了这个问题并提供了一些其他不错的功能。它基本上为您提供了文件下载（甚至包括回调）的“完整的类似 Ajax”的体验，这对于文件下载来说通常是不可能的。它的工作原理与 iframe 的其他一些答案非常相似，但有一些很酷的功能，我发现它们非常方便：

无论下载成功还是出错，用户都不会离开他们启动文件下载的同一页面
successCallback 和 failCallback 函数可让您明确了解在任一情况下的 UI 行为
结合 jQuery UI，开发人员可以轻松地显示一个模式，告诉用户正在下载文件，在下载开始后解散模式，甚至以友好的方式通知用户发生了错误。有关此示例，请参阅 Demo。

这是一个简单的用例演示，使用带有 Promise 的插件 source。 demo page 还包括许多其他“更好的用户体验”示例。

$.fileDownload('some/file.pdf')
    .done(function () { alert('File download a success!'); })
    .fail(function () { alert('File download failed!'); });

【讨论】：