Question

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

每当我在Chrome中使用此技术时，一切正常。但是看一下chrome开发者控制台，我看到了错误消息Failed to load resource。 有没有办法以不同方式执行此操作，以便我不会收到这些错误？

在jsfiddle上可以看到一个非常简单且有效的example of the problem in action。只需点击下载PDF按钮，然后查看Chrome控制台即可。

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

$(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");
    });
});

Answer 1

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

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

“内容处理：附件;文件名= [您的文件名称]”

Answer 2

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

尝试将初始src添加到iframe -

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

我相信应该这样做。（如果错误的话，你可以向我投票数百万次）。）

Answer 3

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

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

Answer 4

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

Answer 5

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")
    });
};

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

Answer 6

将您的功能移到document.ready ...

之外

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

$(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);
        };

通过iframe下载文件时出现Chrome错误

6 个答案: