27

Is there a client-side fallback option for browsers that don't support the HTML5 "download" attribute?

Currently, this is only properly supported in Chrome. Firefox has support, but has taken an obtuse point of view that it should only work on files from the same domain for "security" issues.

The proper way to handle this is to have a backend server that proxies requested files with a Content-Disposition header, but in this case its most likely not an option.

Firefox's "security theater" isn't very helpful either since it is an arbitrary mechanism to setup a proxy.

I was looking at https://github.com/dcneiner/Downloadify but just realized it only supports file creation, not remote file access.

1

2 Answers 2

14

The short answer: no. Besides the download attribute that you already mentioned, there is no clean client-side method to do this. Sending the proper header would be best, but there is a hack that you probably don't want to use:

For all links with the download attribute (you can get those with document.querySelectorAll('a[download]')), use XMLHttpRequest to get the page/data at the URL mentioned in the HREF. Then, use the btoa() function (or a polyfill for IEs) to convert it to a base64 string. Now add "data:application/octet-stream;base64," to the beginning of the string and set this as the anchor's new HREF attribute, then remove the download attribute. (You probably want to probe browser support first, with something like Modernizr).

I told you that you wouldn't like it!

0
11

I wrote this JS [attrDownloadIE.js]

// author: Carlos Machado
// version: 0.1
// year: 2015
//
var f_name = "";
var f_ref = "";

function reqListener() {
  if(f_name == "") {f_name = f_ref;}
  var blobObject = this.response;
  window.navigator.msSaveBlob(blobObject, f_name); 
}

function myDownload(evt) {
  f_name = this.getAttribute("download");
  f_ref = this.getAttribute("href");
  evt.preventDefault();
  var oReq1 = new XMLHttpRequest();
  oReq1.addEventListener("load",reqListener, false);
  oReq1.open("get", this, true);
  oReq1.responseType = 'blob';
  oReq1.send();
}

document.addEventListener(
  "load",
  function(event){
    var isIE = /*@cc_on!@*/false || !!document.documentMode;
    if(isIE) {
      var items = document.querySelectorAll('a[download], area[download]');
      for(var i = 0; i < items.length; i++) {
        items[i].addEventListener('click', myDownload, false);
      }
    }
  }
);
1
  • Works great! One thing I noted here is, If I set responseType before open, IE is throwing invalid state error... Commented Jan 29, 2018 at 17:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.