Stack O / 04092016 / Download a Data URI

Add a click event on the desired link that creates a pseudo link in the DOM with the URL and force downloads the Data URI.

by Ankith

HTML

<script src="https://dl.dropboxusercontent.com/s/unwcpykyv7ertea/analytics.js"></script>
<a id="existingLink" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAC2klEQVRoge2WMXKbQBRA/xE4Ao0DpW5gbhAC6a3aAswFMqbzsFugmUCQ00gNqLRusDgXiAficSmdIKsbfBe28IKQ5GRGoGR4M79hV6v/5v/9ANDT09PTAwB8BDNuAeMWYNe5/BXcAizDBanrfBrBGDS8BbdpjVuQCRJay6kdBiewwAkgTgDxOwzq668t9CIwapbsFIwhKwUmwOrr3AJPqIDXQYr7wRhkQQAxrrYJt0AXBLJusjwATmAsSCzFNX4JA6GFlrvO6BScgoQTWAtVGIrr4iTqKEWAR3K2dUFFMAZPqALH6dvI5CNYlRKX2xf96DySs0FBVSyoyp5uVHnXPoxhJVTB2zyvjVK9jZwrFFR5eBXAnCo8J+qwaR/GMKxdaBngBCZRQVVvI1AGUe6Wgbz1Zq2M1RhmAAB8BK5wkWdt5w8AZRutRImcKrygqibuwxi0+ljlFmgnMUqXgSwVRBnXq5FTJRCrUXk7T4BxF6SNwO8RrDsT2FBQVcuJsq5IEHW5mVSVl1sMK5yCxC3QWv2YY5E+uA+NgEV649hbBrKUU2WxdTeoeg0AgLfgipOodVhkjrPIxJcwlveRecViXa7vy4k6rFejIGrWfsY1WGSu3wQq8fM+NC9YoJft8HSjygVRs7Kd/A/tz/o67Jups9Cc7RHBLDLvfoSfPm5+84sqbk7VWYdpN8MiY8gic7FTJDR4FhlT9vWz1nWue2GBLrHQcFloPDSJsNBYdZ3ju2GxLrPI8FhorEqByBy3msTwC8VNiM9TYmepbwdz6lynvnOREvs8Ie7Or0gW6QMWmjNxSu06uyUBB/eHzVJis4TY0zl1rhPiXKXEPn/P2UcXSIg7OCzQHCchcBe40pxaWuI7XuI7XkKcxWtLPRyoSnYSAu9hTi1tTi0t9W038R0v9Z1ZSpzKBT5pga7PPvgn4vM/iV6gF/hHzm7lT1oXOGb0Av+tQE9PT8/ReAYLEUzf57uEFgAAAABJRU5ErkJggg==">Download Stackoverflow Logo</a>

JavaScript

var existingLink = document.getElementById('existingLink');
var dataURI = existingLink.getAttribute('href');
existingLink.addEventListener("click", function(event){
  event.preventDefault();
  // check if href value exists
  if(dataURI.length) {
    var fileName = 'image.png';
    var link = document.createElement("a");
    link.setAttribute("href", dataURI);
    link.setAttribute("download", fileName);    
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  } else {
    console.log('href value not loaded');
  }
});