How to Use Content-disposition for force a file to download to the hard drive?

A Deep Dive into Downloads

HTML5 Has Your Back

Alongside your server-side parameters, you can instruct a file download on the client-side too. HTML5 gave us the download attribute for the <a> element:

<a href="/path/to/theKraken" download="UnleashedKraken.pdf">Download The Kraken</a>


In up-to-date web browsers, the file pointed to with href gets downloaded by the specified filename.

Old Browsers? No problem!

However, several vintage browsers, including MSIE11, don't support this feature. For these cases, we'd convert the file to a Blob and manually trigger the download:

function downloadKrakenIE(dataUri, filename) {
  var blob = new Blob([dataUri]);
  window.navigator.msSaveOrOpenBlob(blob, filename);
}

// Usage:
downloadKrakenIE(oldSchoolDataUri, 'theKraken');


Downloads That Even Your Granny Would Appreciate

All this can get quite confusing across browsers. So, let's harmonize this into a single function to guarantee cross-browser compatibility:

function downloadKraken(dataUri, filename) {
  if (window.navigator.msSaveOrOpenBlob) { // For the good ol' IE11 and it's cousin Edge
    downloadKrakenIE(dataUri, filename);
  } else {
    // For this modern, hippy-dippy browsers 
    var link = document.createElement("a");
    link.href = dataUri;
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }
}

// Feeling youthful and adventurous? Let's go:
var dataUri = 'data:text/plain;charset=utf-8,Release%20the%20Kraken!';
downloadKraken(dataUri, 'theKraken.txt');


If Error 404 Was an Error

Layer your download initiation logic with error handling to inform the user if something untoward happens:

try {
  releaseTheKraken(); // Your download function
} catch(e) {
  alert('Breaking News: The Kraken couldn\'t be unleashed: ' + e.message);
}


Dodging Disasters Along Download Drive

Special Characters, Not Special Problems

When setting the filename in the Content-Disposition header, ensure it's encoded comprehensively to withstand issues posed by special characters. Functions like rawurlencode in PHP or encodeURIComponent in JavaScript come handy:

header('Content-Disposition: attachment; filename="' . rawurlencode($filename) . '"');


Overwriting Headers is Overrated

While applying Content-Disposition liberally, do keep track to avoid overwriting headers. The last value set will hold the power. Every language and framework have a unique approach to header handling, hence awareness is critical.

Friendly Tips to the Browsers

While forcing the download, be kind to the browsers and provide the correct Content-Type header tailored for the file type:

header('Content-Type: application/pdf');
