How to determine if the browser supports data URIs for hyperlinks

Question

Is there a way to determine whether a browser supports using data URIs for hyperlinks, besides browser sniffing?

Here's the context:

I'm creating a link that either downloads a CSV file of information generated via JavaScript using a handy data URI or, if the browser does not support the use of data URIs for hyperlinks, generates an HTML table of the desired content.

Right now my code checks the existence of the window.URL property, which doesn't exist in IE9 and below. (This is working okay for now, because the IE users I need to support are running in compatibility mode, which emulates IE8.)

if(window.URL){
    downloadLink.href = "data:text/csv;charset=utf-8," + encodeURIComponent(data);
    downloadLink.setAttribute("download","download.csv");
}else{
    downloadLink.href= "#";
    downloadLink.innerHTML = "table view";
    downloadLink.onclick = function(){
        // build and display HTML table
        return false;
    };
}

However, there's some overlap with newer versions of Internet Explorer (10, 11, as well as Edge) in that they support the window.URL object but do not allow data URIs for hyperlinks.

How do I ensure that the link to download a CSV is never displayed to a browser that does not support such fanciness?

See http://stackoverflow.com/questions/836777/how-to-detect-browsers-protocol-handlers , http://stackoverflow.com/questions/24779312/simplest-cross-browser-check-if-protocol-handler-is-registered — guest271314, Nov 12 '15 at 00:06

Thriggle · Accepted Answer · 2015-11-13T17:52:24.283

I believe I've found the answer. Try to detect the presence of a download attribute on an <a> element.

var browserSupportsDataURIsForHyperlinks = 
    typeof document.createElement("a").download  !== "undefined";

or

var browserSupportsDataURIsForHyperlinks = 
    "download" in document.createElement("a");

...In my case, I already had an anchor tag to work with (downloadLink), so I didn't need to create a new one:

if(typeof downloadLink.download !== "undefined"){
    downloadLink.href = "data:text/csv;charset=utf-8," + encodeURIComponent(data);
    downloadLink.setAttribute("download","download.csv");
}else{
    downloadLink.href= "#";
    downloadLink.innerHTML = "table view";
    downloadLink.onclick = function(){
        // build and display HTML table
        return false;
    };
}

If anybody sees anything wrong with this approach, please let me know.

How to determine if the browser supports data URIs for hyperlinks

1 Answers1