JSFiddle - React, Tailwind, and code Playground

by rrryutaro

HTML

<form>
  <input type="file" id="file"/><br>
  <textarea id="write"></textarea><br>
  <a id="download" href="#" download="hoge.txt">ダウンロード</a>
</form>

JavaScript

document.getElementById("file").addEventListener('change', f => {
  var reader = new FileReader();
  reader.readAsText(f.target.files[0])
  reader.addEventListener( 'load', () => {
    document.getElementById("write").value = reader.result;
  });
});
document.getElementById("download").addEventListener('click', () => {
  var text = document.getElementById("write").value;
  var blob = new Blob([ text ], { "type" : "text/plain" });
  document.getElementById("download").href = window.URL.createObjectURL(blob);
});