Open Base64 in new tab

Question

I have a Base64 encoded document which can be PDF file or image. I would like to create a button in HTML5 page that opens this base64 in a new tab (or new page it does not matter)

I found this code can do the trick :

<a href="http://chriscoyier.net" 
   onclick="window.open(this.href); return false;" 
   onkeypress="window.open(this.href); return false;">
     This link will open in new window/tab
</a>

It works well. But when I replace the http link with

href="data:application/octet-stream;base64,/9j/4A.."

then the file is downloaded but not displayed in browser.

Answer 1

Your MIME type is set to 'application/octet-stream', which will generally be downloaded and not displayed (depending on browser and system settings). If you are trying to load browser-displayable content, then you should use a more appropriate MIME type for your content so that it displays inline and does not get downloaded.

Please note: As of Chrome 60 and an upcoming version of FireFox (although it appears FireFox will still support images), data URIs cannot be opened in the top-level frame of the browser (and it was never supported in IE/Edge), but they can be opened in iframes and img elements.

The workaround below is tested and working in the latest version of the above browsers. This could also be rewritten with an img tag to display an image.

<button id='btnDownload'>Download</button>

document.getElementById('btnDownload').addEventListener('click', function(){
    var w = window.open('about:blank');

    setTimeout(function(){ //FireFox seems to require a setTimeout for this to work.
        w.document.body.appendChild(w.document.createElement('iframe'))
            .src = 'data:application/octet-stream;base64,SWYgSSBoYWQgYSBuaWNrbGUgZm9yIGV2ZXJ5IHRpbWUgSSBoYWQgYSBuaWNrbGUsIEknZCBoYXZlIGVhdGVuIHR3aWNlIGFzIG1hbnkgcGlja2xlcy4=';
    }, 0);
});

If, however, your intention is to just download the content (contrary to the stated intent in the question, but applicable to 'application/octet-stream' content in general), this should suffice:

<a href='data:application/octet-stream;base64,SWYgSSBoYWQgYSBuaWNrbGUgZm9yIGV2ZXJ5IHRpbWUgSSBoYWQgYSBuaWNrbGUsIEknZCBoYXZlIGVhdGVuIHR3aWNlIGFzIG1hbnkgcGlja2xlcy4=' download>Download this</a>

Answer 2

I am adding the answer to my question based on Aaron's answer:

document.getElementById('btnDownload').addEventListener('click', function(){
    var w = window.open('about:blank');
    setTimeout(function(){ //FireFox seems to require a setTimeout for this to 
    work.

        w.document.body.appendChild(w.document.createElement('iframe'))
            .src = $this.attr('href');
        w.document.getElementsByTagName("iframe")[0].style.width = '100%';
        w.document.getElementsByTagName("iframe")[0].style.height = '100%';
    }, 0);
});