Download a file by clicking a button

Question

This is the HTML:

<button name="download">Download</button>

I want users to download a file when they click this button. For that, I'm using the following Ajax request:

$parent.find('button[name=download]').click(function () {
    $.ajax({
        url: "download.php",
        sucess: function(data, status, jqXHR){
            $console.text('Download efetuado');
        },
        error:function(xhr, status, error){
            $console.text(xhr.responseText);
        }
    });
});

Where download.php is:

if (file_exists($myFile)){
        header ("Content-Type: application/json");
        header ("Content-Disposition: attachment; filename=$fileName");
        header("Content-Length: " . filesize("$myFile"));
        $fp = fopen("$myFile", "r");
        fpassthru($fp);
    } else {
        echo "no file exists";
    };

This isn't outputing anything and no file is downloaded. I know the PHP script is working and is being called.

don't send an ajax request. Just redirect to the download. Or better yet, make the button an anchor tag and remove the javascript. — Kevin B, Oct 09 '13 at 16:54
possible duplicate of [How to download a file on clicking the name of file using PHP?](http://stackoverflow.com/questions/4518702/how-to-download-a-file-on-clicking-the-name-of-file-using-php) — showdev, Oct 09 '13 at 16:56

score 4 · Accepted Answer · answered Oct 09 '13 at 17:01

Don't use AJAX to download a file. It's not that it can't make the request and receive the response, it's just that it doesn't really have any meaningful way to handle the response.

The browser itself, on the other hand, does.

So you can just direct the browser to the request:

$parent.find('button[name=download]').click(function () {
    window.location.href = 'download.php';
});

If download.php is sending a response of Content-Disposition: attachment; then the page isn't going to be unloaded or modified in any way. The browser is going to handle the response of this request entirely separately from the current page context, and after handling the response that page context will remain.

(Unless, of course, the browser is configured to do something with that response, such as always display it instead of prompting to save it. But there's nothing you can do about that in code.)

At this point, in fact, it makes even more sense to just remove the JavaScript entirely and make it a normal link, which would accomplish the same thing:

<a href="download.php">Download</a>

You can style it to look like a button, which it probably more accessible than an actual button running JavaScript code. (If the browser doesn't have JavaScript enabled then the button would be useless, but a link would work just fine.)

That's it! I removed the AJAX but kept the click handler to provide a short feedback message to the user, thanks for your help! — , Oct 09 '13 at 17:20

Download a file by clicking a button

1 Answers1