How to make a "Save" button using JavaScript?

I'm working on a little project, and want to add a "Save" button which will when clicked convert everything which is inside of a certain div class into a downloadable .txt (or .pdf or any other document viewing file type) document.

I want to note one more thing, the content of that div isn't "static" (if I can call it that), since the user / visitor can edit it, to clarify, the user / visitor can delete the text in that div, as well as add new text to that div. I'm not sure does this make any kind of difference, but there it is just as a little note.

Is this possible?

Comments

[Prakhar Tandon]

This can be done through Blob constructor.
Read More below.
stackoverflow.com/questions/134051...

Cheers!

[T3C Studios]

Great! Works fine as far as the saving goes..

Just how can I select the div class I want the button to save? I cannot figure that part out..

I have this on the button:
onclick="download('Test', 'MyTasks.txt', 'text/plain')"

And the 'Test' is the text which will appear in the text file, but how can I make it be instead of "Test" whatever is in my certain div class?

[Valeria]

You can get contents with

document.getElementById("your-div-id").innerText

developer.mozilla.org/en-US/docs/W...

[FJones]

You're likely looking for a solution that gets a div containing or adjacent to your button, or a child of an adjacent element. I'd suggest something along these lines:

<div class="has-exportable-content">
  <button type="button" onclick="saveHandler">save</button>
  <div class="exportable-content">text</div>
</div>

With the JS along these lines:

function saveHandler({ currentTarget }) {
  let elem = currentTarget;
  do {
    elem = elem.parentElement;

    if (elem && elem.classList.contains("has-exportable-content")) {
      const { textContent } = elem.querySelector(".exportable-content") || {};
      download(textContent, ...);
      return;
    }
  } while (elem && elem !== elem.getParentNode());
}

(Some alternatives notwithstanding depending on your particular use-case. e.g. innerText vs textContent or parentNode vs parentElement, and target vs currentTarget.)