AJAX(或AJAX风格)文件下载

Question

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

在我正在开发的web应用程序中，需要下载AJAX风格的文件，并满足以下要求

1. 用户可以点击链接下载文件，而无需指向新页面，就会收到一个正常的"另存为.."对话框，我们都习惯于在web浏览器中下载文件
2. 如果由于某种原因服务器无法提供文件，则应调用javascript回调。类似地，如果服务器成功地提供了文件
3. 需要能够修改HTTP请求标头以指定请求中的内容类型HTTP标头
4. 支持所有A级浏览器

到目前为止研究的内容：

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

b。可以使用XMLHttpRequest从文件中检索二进制数据（使用不同浏览器的各种技巧（链接1、链接2、链接3、链接4、链接5、链接6、链接7、链接8）。但它们都不能满足要求1。二进制数据可以保存在javascript变量中，但无法调用浏览器的"另存为…"对话框来允许用户将此二进制数据保存到硬盘上的文件中

c。此链接（在"下载+将文件保存到HTML5文件系统"标题下）具有使用XHR2的完整端到端解决方案，可满足要求1、2和3。但它的支持很差（使用了非常新的HTML5FileWriter）。

有完整的解决方案吗？

编辑 我们还有一些选择——我计划测试一下。也许唯一的选择是为这个问题开发一个库，将所有的技巧/解决方案收集在一起，以创建一个通用的解决方案。

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

   对于Internet Explorer：使用IE的execCommand（）保存此数据

   对于其他人：使用data-uris（链接2）和<a>标签指定名称（链接1、链接2、链接3、链接4）

2. 这个链接提到了使用canvas 的文件下载功能

3. 下载（以及此链接）

4. 一个看似相关的链接，它与网络工作者有关，但正在使用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>

这将把给定文本区域的内容保存到一个文件中，该文件的名称等于文本区域的ID。

至于其他浏览器，你可以读到：execCommand SaveAs在Firefox中工作吗？

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