Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Any fallback client-side solutions for the html5 download attribute?

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.

like image 339
Geuis Avatar asked Sep 06 '13 07:09

Geuis


2 Answers

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!

like image 147
rvighne Avatar answered Oct 22 '22 09:10

rvighne


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);
      }
    }
  }
);
like image 37
Carlos Machado Avatar answered Oct 22 '22 09:10

Carlos Machado