JSFiddle - React, Tailwind, and code Playground

by incutonez

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<a id="myDownload" download="Text.txt" href="data:application/octet-stream;base64, ">anchor tag download</a><br />
<a id="myDownload2" href="#">simulated anchor tag download</a><br />
<a id="myDownload3" href="#">window.open download</a><br />
<a id="myDownload4" href="#">iframe download</a>

JavaScript

$(document).ready(function() {
	var d = 'VGhpcyBpcyBhIHRlc3QhDQoNCg0KDQoNCg0KDQpoZXkgbG9vaw0KDQoNCg0KDQoNCnRleHQ=';
  // Using a plain old anchor tag... some browsers might limit the URL size
  $('#myDownload').attr('href', 'data:application/octet-stream;base64, ' + d);
  // This is the newer way, which doesn't work in IE10-, I believe
  $('#myDownload2').on('click', function() {
  	var link = document.createElement("a");
    link.download = 'Test.txt';
    link.href = 'data:text/xml;base64, ' + d;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    delete link;
  });
  // window.open... some browsers might limit the URL size
  $('#myDownload3').on('click', function() {
  	window.open('data:application/octet-stream;base64, ' + d);
  });
  // iframe approach
  $('#myDownload4').on('click', function() {
  	var iframe = document.createElement('iframe');
    iframe.src = 'data:application/octet-stream;base64, ' + d;
    iframe.style = 'display: none;';
    document.body.appendChild(iframe);
    setTimeout(function() {
    	document.body.removeChild(iframe);
    }, 100);
  });
});