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.
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!
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);
}
}
}
);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With