Force Browsers to Download Files with Link

This is an elegant (hack) solution to problems with browsers opening files such as a .pdf in the browser using Adobe Acrobat Reader instead of downloading them as you might want. FireFox unfortunately has problems opening or viewing .pdf files without a user installed plugin. So, the problem is most browsers will preview a file in the browser window instead of just downloading the file directly to the users computer.

The solution: Create a separate page (.html or .php) using a raw HTTP header to instruct the browser to download your specified file in its first instance.

Try it out –

download this .pdf file!

How it’s done

Open up your HTML editor (Coda, Dreamweaver, Text Edit… or whatever your using) and crate a new page, call it download.html or if your using .php for your file types you can still do so, it doesn’t really matter. I used “file-download.php” for this tutorial and stuck it in my root directory.

Style up the page, with some simple HTML, just in case the user/ visitor has problems with the download (funky things can happen), its a good idea to always sound more human, should an error occur.

<head>

    <title>Your download page</title>

</head>

<body>

    <p>Your download will start immediately, if it doesn't "Refresh" this page.</p>

</body>

Then add this code before any output is sent to the browser, such as meta data, or associated files, tags and blank lines or spaces. This command will cause the linked file (in this case a .pdf file) to download to the users computer without actually loading the page. But we’ve added a friendly instruction to the page “just in case” of any error!

<?php
    // Sending the file - a pdf in this case
    header('Content-type: application/pdf');

    // Specify what the  file will be called
    header('Content-Disposition: attachment; filename="downloaded-document.pdf"');

    // And specify where it is coming from 
    readfile('downloaded-document.pdf');
?>

How it all works together –

<?php
    // Sending the file - a pdf in this case
    header('Content-type: application/pdf');

    // Specify what it will be called
    header('Content-Disposition: attachment; filename="downloaded-document.pdf"');

    // And specfy where its coming from 
    readfile('downloaded-document.pdf');
?>

<head>

    <title>Your download page</title>

</head>

<body>

    <p>Your download will start immediately, if it doesn't "Refresh" this page.</p>

</body>

Then simply add a link anywhere on your site linking to the page “file-download.php” and you’ll be singing!

<!-- Remember to change 'www.your-website.com' with your own website address -->
<a href="http://www.your-website.com/file-download.php" title="Download This PDF">Download This File!</a>

Remember, it’s always best practice to have your visitors choose to download or view any .pdf files in their browsers, forcing a download can spoil user experience and ward off any returns. However using this solution wisely can enhance usability on your site. There are other ways to force download a file to your visitors computer, such as adding instructions to your .htaccess file, Chris Coyer has posted a snippet over on CSS Tricks that works well too. Please share this if you use it!