How to Trigger a File Download When Clicking an HTML Button or JavaScript

.button-link {
  font: bold 11px Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
}

<a href="file.txt" download="file.txt" class="button-link">Download</a>

How to trigger a file download with text area content when clicking an HTML button

• firstly you are selected all textarea by SelectorAll then generated the link without loop through it
• also even if you done a loop that's will generate link for all textarea elements
• if you want to download the textarea before clicked button it's will be better to add them inside a container and use this keyword
• or use pervouisSibling
• also it's will be better to use css instead of br tag
• you don't need jQuery because your function already uses Vanillajs

1. By adding them inside container

HTML

<div class="container">
     <textarea class="text_mop" style="display: none;">Welcome to 1st sentence</textarea>
    <input type="button" class="btn_mop" value="Download" class="fa fa-home" aria-hidden="true" />
 </div>
 <div class="container">
     <textarea class="text_mop" style="display: none;">Welcome to 2nd sentence</textarea>
    <input type="button" class="btn_mop" value="Download" class="fa fa-home" aria-hidden="true" />
 </div>

CSS

.text_mop, .btn_mop {
   display: block;
  width: auto;
}

JS

function download(file, text) {
  //creating an invisible element
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/html;charset=utf-8, ' + encodeURIComponent(text));
  console.log(element.href);
  element.setAttribute('download', file);
  document.body.appendChild(element);
  element.click();
  document.body.removeChild(element);
}

var btn_mop = document.getElementsByClassName("btn_mop");
for (var btn of btn_mop) {
  btn.addEventListener("click", function() {
    var text = this.parentNode.getElementsByClassName("text_mop")[0];
    var filename = "MOP.txt";
    download(filename, text.value)
  });
}

2. by previousSibling property

HTML

<textarea class="text_mop" style="display: none;">Welcome to 1st sentence</textarea>
    <input type="button" class="btn_mop" value="Download" class="fa fa-home" aria-hidden="true" />
 
     <textarea class="text_mop" style="display: none;">Welcome to 2nd sentence</textarea>
    <input type="button" class="btn_mop" value="Download" class="fa fa-home" aria-hidden="true" />

CSS

.text_mop, .btn_mop {
     display: block;
    width: auto;
}

JS

function download(file, text) {
  //creating an invisible element
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/html;charset=utf-8, ' + encodeURIComponent(text));
  element.setAttribute('download', file);
  document.body.appendChild(element);
  element.click();
  document.body.removeChild(element);
}

var btn_mop = document.getElementsByClassName("btn_mop");
for (var btn of btn_mop) {
  btn.addEventListener("click", function() {
    var text = this.previousSibling.previousSibling
    var filename = "MOP.txt";
    download(filename, text.value)
  });
}

---

Related Topics