DEV Community

T3C Studios
T3C Studios

Posted on

How to make a "Save" button using JavaScript?

#webdev #begginer #help

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?

Top comments (4)

Collapse
 
prakhart111 profile image
Prakhar Tandon •

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

Cheers!

Collapse
 
t3cstudios profile image
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?

Collapse
 
valeriavg profile image
Valeria •

You can get contents with

document.getElementById("your-div-id").innerText
Enter fullscreen mode Exit fullscreen mode

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

Collapse
 
fjones profile image
FJones • • Edited

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>
Enter fullscreen mode Exit fullscreen mode

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());
}
Enter fullscreen mode Exit fullscreen mode

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

Read next

afiqiqmal profile image

Preventing Duplicate Requests in Laravel: The AtomicLockMiddleware

Hafiq Iqmal -

asfiaaiman profile image

Simplifying Localization in Laravel 11: New Number Methods Unveiled

Asfia Aiman -

dev007777 profile image

Open Canvas Vs ChatGPT Canvas

TheDev -

mukarramjavid profile image

How to Create PDFs in React from JSON Data with jsPDF

Mukarram Javid -