使用jQuery和iFrame下载文件

问题描述

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

I have the following code to download a .csv file:

$.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 文件的问题。

The urlString is pointing to a Restful service that generates the .csv file and returns the file path which is assigned to the src attribute for the iFrame. This works for any .csv files but I'm having problems with .xml files.

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

When I use the same code but changing the contentType to text/xml and use it for downloading .xml files this doesn't work.

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

Can I use the same approach here for .xml files?

更新：

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

Thanks to Ben for pointing me to the right direction. It turns out I don't need the ajax call at all. Instead, I can just use the iFrame and its url attribute to call the web service, which will generate the content, add the header (Content-Disposition), and return the stream.

推荐答案

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

I'm guessing that the problem is that most browsers will try to render XML in the browser itself, whereas they tend to have no handler for CSV, so they'll automatically default to prompt the user to download the file. Try modifying the headers of the XML file to force the download. Something like (PHP example):

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

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

That should tell most browsers not to attempt to open the file, but instead to have the user download the file and let the OS determine what to do with it.

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

If you have no power to control headers in the XML file itself, you can try a work-around using a server-side script. Use JS to pass the URL to a server-side script:

//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 script）你使用 cURL / file_get_contents / wgets / [获取远程文件的其他一些机制]来获取远程文件的内容，添加 Content-Disposition：attachment 标头，以及 print 原始文件的代码。

and on the server-side (your http://example.com/load_file_script script) you use cURL/file_get_contents/wgets/[some other mechanism of fetching remote files] to grab the contents of the remote file, add the Content-Disposition: attachment headers, and print the code of the original file.

这篇关于使用jQuery和iFrame下载文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！