Question

这是一个以各种不同方式提出的常见问题，我在下面收集了一些链接并解释了它们无法正常工作的原因。我正在寻找以下的完整解决方案。

在我正在开发的Web应用程序中，需要按照以下要求下载AJAX文件

用户可以点击链接下载文件而不会被定向到新页面，将收到一个正常的“另存为...”对话框，我们都习惯在网络浏览器中下载文件
如果由于某种原因服务器无法提供文件，则应调用javascript回调。同样，如果服务器成功提供文件
需要能够修改HTTP 请求标头，以指定请求中的 Content-Type HTTP标头
支持所有A级浏览器

到目前为止研究的内容：

一个。 jquery.fileDownload通过使用表单提交，隐藏的iframe和让服务器设置特定cookie，非常优雅地解决了需求1,2和4。我对这个项目非常熟悉（也为此做出了贡献）。但不支持要求3，因为HTML表单提交和iframe（此库使用）不允许为请求的服务器资源指定HTTP标头。（jdownloader也使用类似的iframe / form技术，但它也没有解决要求3）。

湾可以使用XMLHttpRequest从文件中检索二进制数据（针对不同的浏览器使用各种hack（link 1，link 2，link 3，link 4，link 5 ，link 6，link 7，link 8）。但是它们都没有满足要求1.二进制数据可以保存在javascript变量中，但没有办法调用浏览器的“另存为...“对话框，允许用户将此二进制数据保存到硬盘上的文件中

℃。 This link（在“下载+保存文件到HTML5文件系统”标题下）有一个完整的端到端解决方案，使用XHR2并满足要求1,2和3。但是它得到了很好的支持（使用非常新的HTML5 FileWriter）。

那里有完整的解决方案吗？

修改我们有更多的选择 - 我打算测试。也许唯一的选择是通过收集所有黑客/解决方案来为这个问题开发一个库，以便创建一个通用的解决方案。

根据下面的fibertech解决方案：使用上面的解决方案（b）将文件保存到变量中，然后：

对于Internet Explorer：使用IE的execCommand（）
保存此数据
对于其他人：使用data uris（link 2）和＆lt; a＆gt;的HTML5 下载属性标记以指定名称（link 1，link 2，link 3，link 4）
This link提到使用画布的文件下载功能
Downloadify（以及this link）
一个看似相关的link与网络工作者有关，但是正在使用Blob和FileApi来生成文件。

Answer 1

IE唯一的解决方案：

function SaveContents(element) {
    if (typeof element == "string")
        element = document.getElementById(element);
    if (element) {
        if (document.execCommand) {
            var oWin = window.open("about:blank", "_blank");
            oWin.document.write(element.value);
            oWin.document.close();
            var success = oWin.document.execCommand('SaveAs', true, element.id)
            oWin.close();
            if (!success)
                alert("Sorry, your browser does not support this feature");
        }
    }
}

必需的HTML示例：

<textarea id="myText"></textarea><br />
<button type="button" onclick="SaveContents('myText');">Save</button>

这会将给定textarea的内容保存到一个名称等于textarea的ID的文件中。

对于其他浏览器，您可以阅读：Does execCommand SaveAs work in Firefox?

测试用例和工作示例：http://jsfiddle.net/YhdSC/1/（仅限IE浏览器）

AJAX（或AJAX-esque）文件下载

1 个答案: