Generate file with JS

Question

I have a query and mount a string with the result. So far everything is ok!

What is giving me trouble is to find a good way so that when the query is finished and the string is already mounted, a file containing the string is downloaded to the client’s pc.

Answer 1

You can define an anchor element, <a>, using the URL encoding to generate your TXT file and download it. Just create the element dynamically, set the attribute href and the property download with the name of the file you want to create; after you insert it into the body of the page - some browsers may block the event click if the element is not in the body of the page - and trigger the event click of the element by removing it from the body of the page at the end.

function createAndDownload(filename, text) {
  const element = document.createElement('a');

  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

Take an example:

function createAndDownload(filename, text) {
  const element = document.createElement('a');

  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

<button onClick="createAndDownload('sopt.txt', 'Stack Overflow em Português')">Download</button>