使用 jQuery 和 iFrame 下载文件

IT技术 javascript jquery
2021-03-08 20:16:10

我有以下代码来下载.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指向到生成RESTful服务.csv文件，并返回其被分配给用于所述iFrame的src属性的文件路径。这适用于任何.csv文件，但我遇到.xml文件问题。

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

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

更新：

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

2个回答

您还可以将其作为从虚拟锚点元素下载的内容提供，即使数据是客户端的：

/*
 * 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/

杰出的。这只是帮助我解决了一个难题（使用 $.ajax 输出生成的 PDF，以便您可以在单击下载链接时显示加载程序，然后在将文件提供给浏览器后再次隐藏它。谢谢！！
2021-04-30 20:16:10
谢谢！它适用于与隐藏 iframe 相对的 ios。
2021-05-08 20:16:10

我猜测问题在于大多数浏览器会尝试在浏览器本身中呈现 XML，而它们往往没有 CSV 处理程序，因此它们会自动默认提示用户下载文件。尝试修改 XML 文件的标题以强制下载。类似于（PHP示例）：

header("Content-Type: application/force-download");
header("Content-Type: application/octet-stream");
header("Content-Type: application/download");
header('Content-Disposition: attachment; filename="some filename"');

这应该告诉大多数浏览器不要尝试打开文件，而是让用户下载文件并让操作系统决定如何处理它。

如果您无权控制 XML 文件本身中的标头，则可以尝试使用服务器端脚本进行变通。使用 JS 将 URL 传递给服务器端脚本：

//build the new URL
var my_url = 'http://example.com/load_file_script?url=' + escape(path_to_file);
//load it into a hidden iframe
var iframe = $("<iframe/>").attr({
    src: my_url,
    style: "visibility:hidden;display:none"
}).appendTo(buttonToDownloadFile);

和服务器端（您的http://example.com/load_file_script脚本）使用cURL/ file_get_contents/ wgets/抢远程文件的内容，添加[其它一些获取远程文件的机制]Content-Disposition: attachment标头和print原始文件的代码。

我知道了。正如您所指出的，我是否需要所有 4 个标题？我应该在我的 javascript 中使用什么内容类型？
2021-04-15 20:16:10
不，不一定。这Content-Disposition: attachment; filename="some filename"可能是您唯一需要的，但有些浏览器可能很挑剔。
2021-04-22 20:16:10
恐怕我不太明白你建议的解决方法。我的服务器是 .NET (WCF)。你是说我应该从服务器端添加标题吗？
2021-04-28 20:16:10
是的。如果您不控制 RESTful API，那么您无法仅使用 HTML/JS 设置标题。因此，您要做的是在您的 .NET 服务器上创建一个脚本，该脚本可以接收远程 URL 作为参数，获取远程文件，使用新标头重新打包，然后将其作为附件提供。
2021-04-28 20:16:10
其它你可能感兴趣的问题
上一篇为什么 {} != ( {} ) 在 JavaScript 中？ 下一篇获取 ES6 Symbol 的描述