关于javascript：通过iframe下载文件时出现Chrome错误


Chrome error on downloading file via iframe

我正在向服务器提交JSON数据。 服务器生成PDF文件并使用该PDF文件的URL进行响应。 然后我再向服务器发出下载PDF文件的请求。 要进行下载，我创建一个隐藏的iframe并将源设置为PDF网址。 请注意，我希望用户的浏览器保持在同一页面并在后台下载。 关于我正在做什么以及我采用的解决方案的更多细节可以在这个SO问题中找到。

每当我在Chrome中使用这种技术时，一切正常。 但是看一下chrome开发人员控制台，我看到了错误消息Failed to load resource。 有没有办法以不同的方式做到这一点，以便我不会得到这些错误？

在jsfiddle上可以看到一个非常简单且有效的问题。 只需单击"下载PDF"按钮，然后查看Chrome控制台即可。

该页面上的代码如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready( function() {
    var downloadFile = function(url){
        var iframe = $("iframe#download");
        if (!iframe.length) {
            iframe = $("<iframe id='download' style='display:none;'/>");
            $("body").append(iframe);
        }
        iframe.attr("src", url);
    };

    $("button").click(function() {    
        downloadFile("http://www.education.gov.yk.ca/pdf/pdf-test.pdf");
    });
});
相关讨论

其他受访者建议更改内容类型标题，这应该也可以正常工作，但是有一个特定的响应标题用于指示浏览器如何处理文件。

以下应强制下载pdf而不是在浏览器中显示：

"内容处理：附件;文件名= [您的文件名]"

相关讨论

Chrome有一个内置的PDF查看器。当您设置iframe的src时，Chrome只会尝试显示PDF文件。由于它设置为display:none，下载将被取消，您将收到该消息。

尝试将display设置为none以外的其他内容，并使用position:absolute将iframe放在屏幕上。

这只是我的头脑 - 我相信我之前遇到过同样的问题。当iframe首次添加到dom时，它没有src - 这使Chrome"无法加载资源"。

尝试将初始src添加到iframe -

1
 iframe = $("<iframe id='download' src='about:blank' style='display:none;'/>");

应该这样做我相信。 (如果错了，你可以给我数百万次:)

相关讨论

1
2
3
4
5
6
7
8
9
10
11
var downloadFile = function(url){
    var iframe = $("iframe#download");
    if (!iframe.length) {
        iframe = $("<iframe id='download' style='display:none;'/>");
        $("body").append(iframe);
    }
    iframe.attr("src", url);
    iframe.on('load',function(){
          console.log("error")
    });
};

你试试这个，它有效，但这不是解决这个问题的正确方法......

我将文件的src更改为我自己的Web服务器上的src，并将响应头的"content-type"设置为"application / octet-stream"而不是"application / pdf"，并在Chrome中正确下载。我应该指出错误仍然出现在控制台中("加载资源错误")，但它仍然促使我下载文件。

将你的功能移到document.ready之外......

一般功能应始终在...之外，并且应该在需要时调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready( function() {    

    $("button").click(function() {    
        downloadFile("http://www.education.gov.yk.ca/pdf/pdf-test.pdf");
    });
});

    var downloadFile = function(url){
            var iframe = $("iframe#download");
            if (!iframe.length) {
                iframe = $("<iframe id='download' style='display:none;'/>");
                $("body").append(iframe);
            }
            iframe.attr("src", url);
        };
相关讨论