<a class="simple">Download Multi-line Text File (Blob)</a>

​

<textarea></textarea>

​

<button class="save-file">Save File</button>

body {

  margin: 20px auto;

  font-family: "Lato";

  font-weight: 300;

}

​

a {

  display: block;

  margin: 2rem;

  font-size: 2rem;

  font-weight: bold;

}

​

textarea {

  margin: 2rem;

  font-size: 1.5rem;

  width: 36ch;

  height: 10ch;

  font-family: "Lato";

  font-weight: bold;

  max-width: 90%;

}

​

button.save-file {

  background: blue;

  width: fit-content;

  padding: 0.5rem 1rem;

  color: white;

  margin-top: 0;

  border: none;

  cursor: pointer;

  display: block;

  margin: 0 2rem;

  font-size: 2rem;

  font-family: "Lato";

  font-variant: small-caps;

  font-weight: bold;

}

​

button.save-file:hover {

  background: green;

}

​

const link = document.querySelector('a.simple');

​

const saveBtn = document.querySelector('button.save-file');

​

let name = 'Monty';

​

let text = `My name in ${name}.

​

I love writing tutorials.`;

​

var textBlob = new Blob([text], {type: 'text/plain'});

​

link.setAttribute('href', URL.createObjectURL(textBlob));

​

link.setAttribute('download', `${name.toLowerCase()}.txt`);

​

​

saveBtn.addEventListener('click', function(){

  var tempLink = document.createElement("a");

  let textArea = document.querySelector("textarea");

  var taBlob = new Blob([textArea.value], {type: 'text/plain'});

​

  tempLink.setAttribute('href', URL.createObjectURL(taBlob));

​

  tempLink.setAttribute('download', `${name.toLowerCase()}.txt`);

  tempLink.click();

  URL.revokeObjectURL(tempLink.href);

});