Chrome error on downloading file via iframe

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.

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?

A very simple and working example of the problem in action can be seen on jsfiddle. Just click the Download PDF button and look at your Chrome console.

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

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.

The following should force the pdf to be downloaded rather than displayed in the browser:

"Content-disposition: attachment; filename=[your file's name]"

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".

Try adding an initial src to the 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 :))

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.

Try setting display to something other than none and position the iframe off the screen with position:absolute.

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.

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...

move your function outside of 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);
        };