javascript - 使用 jQuery 和 iFrame 下载文件

Question

我有以下代码来下载 .csv 文件:

$.ajax({
    url: urlString,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    cache: false,
    success: function(data) {
        if (data) {
            var iframe = $("<iframe/>").attr({
                src: data,
                style: "visibility:hidden;display:none"
            }).appendTo(buttonToDownloadFile);
        } else {
            alert('Something went wrong');
        }
    }
});

urlString 指向生成 .csv 文件并返回分配给 iFrame 的 src 属性的文件路径的 Restful 服务。这适用于任何 .csv 文件，但我在处理 .xml 文件时遇到问题。

当我使用相同的代码但将 contentType 更改为 text/xml 并将其用于下载 .xml 文件时，这不会工作。

我可以对 .xml 文件使用相同的方法吗？

更新:

感谢 Ben 为我指明了正确的方向。事实证明我根本不需要 ajax 调用。相反，我可以只使用 iFrame 及其 url 属性来调用 Web 服务，这将生成内容、添加 header (Content-Disposition)，并返回流。

Answer 1

即使数据是客户端的，您也可以将其作为虚拟 anchor 元素的下载提供:

/*
 * Create an anchor to some inline data...
 */

var url = 'data:application/octet-stream,Testing%20one%20two%20three';
var anchor = document.createElement('a');
    anchor.setAttribute('href', url);
    anchor.setAttribute('download', 'myNote.txt');

/*
 * Click the anchor
 */

// Chrome can do anchor.click(), but let's do something that Firefox can handle too

// Create event
var ev = document.createEvent("MouseEvents");
    ev.initMouseEvent("click", true, false, self, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

// Fire event
anchor.dispatchEvent(ev);

http://jsfiddle.net/D572L/