javascript 通过 iframe 下载文件的 Chrome 错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4351273/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Chrome error on downloading file via iframe
提问by Tauren
I'm submitting JSON data to a server. The server generates a PDF file and responds with the URL to that PDF file. I then make another request to the server to download the PDF file. To do the download, I create a hidden iframe and set the source the the PDF url. Note that I want the user's browser to stay on the same page and download in the background. More details about what I'm doing and the solution I went with can be found in this SO question.
我正在向服务器提交 JSON 数据。服务器生成一个 PDF 文件并使用该 PDF 文件的 URL 进行响应。然后我向服务器发出另一个请求以下载 PDF 文件。为了进行下载，我创建了一个隐藏的 iframe 并将源设置为 PDF url。请注意，我希望用户的浏览器保持在同一页面上并在后台下载。有关我在做什么以及我采用的解决方案的更多详细信息，可以在这个 SO question 中找到。
Whenever I use this technique in Chrome, everything works fine. But looking at the chrome developer console, I see the error message Failed to load resource. Is there a way to do this differently so that I won't get these errors?
每当我在 Chrome 中使用这种技术时，一切正常。但是查看 chrome 开发人员控制台，我看到了错误消息Failed to load resource。有没有办法以不同的方式执行此操作，以免出现这些错误？
A very simple and working example of the problem in actioncan be seen on jsfiddle. Just click the Download PDF button and look at your Chrome console.
在 jsfiddle 上可以看到一个非常简单且有效的问题示例。只需单击“下载 PDF”按钮并查看您的 Chrome 控制台。
The code on that page looks like this:
该页面上的代码如下所示：
$(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");
});
});
采纳答案by R Hill
Other respondents have suggested changing the content-type header, which should work just as well, but there's a specific response header for instructing the browser how to treat a file.
其他受访者建议更改 content-type 标头，这应该也能正常工作，但有一个特定的响应标头用于指示浏览器如何处理文件。
The following should force the pdf to be downloaded rather than displayed in the browser:
以下应强制下载 pdf 而不是在浏览器中显示：
"Content-disposition: attachment; filename=[your file's name]"
“内容处置：附件；文件名=[您的文件名]”
回答by mattbasta
Chrome has a built-in PDF viewer. When you set the src of the iframe, Chrome just tries to display the PDF file. Since it's set to display:none, the download gets canceled and you get that message.
Chrome 有一个内置的 PDF 查看器。当您设置 iframe 的 src 时，Chrome 只会尝试显示 PDF 文件。由于它被设置为display:none，下载被取消并且您会收到该消息。
Try setting displayto something other than noneand position the iframe off the screen with position:absolute.
尝试将iframe设置display为其他内容none并将 iframe 放置在屏幕之外position:absolute。
回答by ansiart
This is just off the top of my head -- I believe I've run into the same issue before. When the iframe is first added to the dom, it has no src -- which makes Chrome "FAIL TO LOAD RESOURCE".
这只是我的头顶 - 我相信我以前遇到过同样的问题。当 iframe 首次添加到 dom 时，它没有 src——这使得 Chrome“无法加载资源”。
Try adding an initial src to the iframe --
尝试将初始 src 添加到 iframe --
iframe = $("<iframe id='download' src='about:blank' style='display:none;'/>");
That should do it I believe. (you can downvote me a zillion times if it's wrong :))
我相信应该这样做。（如果错了，你可以给我投票无数次:)）
回答by Riley Dutton
I changed the src of the file to one on my own web server and set the "content-type" of the response header to "application/octet-stream" instead of "application/pdf", and it downloaded correctly in Chrome. I should point out that the error still showed up in the console ("Error loading resource"), but it prompted me to download the file anyway.
我在自己的 Web 服务器上将文件的 src 更改为 src，并将响应标头的“内容类型”设置为“application/octet-stream”而不是“application/pdf”，并且它在 Chrome 中正确下载。我应该指出错误仍然出现在控制台中（“错误加载资源”），但它仍然提示我下载文件。
回答by Vinoth
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")
});
};
U just try this,It is working, But this is not a correct way to solve this problem...
你试试这个，它是有效的，但这不是解决这个问题的正确方法......
回答by kobe
move your function outside of document.ready...
将您的功能移到 document.ready 之外...
general functions should be always outside...and should be called whereever it is needed
一般函数应该总是在外面......并且应该在需要的地方调用
$(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);
};
