Save Div Contents as a file and Load Div Contents from file?

Question

Is it possible to save the contents inside of a Div as a file (Could be .txt or .html or anything) and loading the contents from the file later on (Replacing the content already in the DIV). If this can't be done via JS/Jquery, would it be possible in a diff language (php?).

For example:

<div class="etc">
    Content here
</div>
        
<a href='link.html' download>
    <button>Save Content</button>
</a>

<button>Load Content</button>

I assume you'll want the file to be stored in the user's local filestore on their machine, otherwise you'll need to have some way of storing things depending on the user (e.g. a login system) on your backend. Is that right or have I misinterpreted? — A Haworth, Aug 30 '22 at 08:23

score 0 · Answer 1 · answered Aug 30 '22 at 03:11

0

You can use the iframe to display the contents from the file.. but the file should be hosted somewhere.. you can't directly read local system files without user upload.

And for downloading contents as a file refer here

answered Aug 30 '22 at 03:11

Ramkumar G

415
1
8

score 0 · Accepted Answer · answered Aug 30 '22 at 03:31

I actually had some old Code laying around that did this.. So this is a very basic example that you can extend from.. It requires HTML5 tho.. It could be vastly improved upon too (old code, throws up)

Another route would be Posting contents using Jquery.ajax and creating the file on your backend (like php) that way you could generate more complicated file formats than raw text with a file extension

<!DOCTYPE html>
<html>
  <head>
    <title>Basic File In/Out</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script>
      function checkFileAPI() { //check if api is supported (req HTML5)
        if (window.File && window.FileReader && window.FileList && window.Blob) {
          return true;
        }else{
          alert('The File APIs are not fully supported by your browser. Use a better browser.');
          return false;
        };
      };

      $(document).ready(function() {
        checkFileAPI();

        $("#fileInput").change(function(){
          if(this.files && this.files[0]) {
            reader = new FileReader();
            reader.onload = function (e) {
              // do parsing here. e.target.result is file contents
              $("#contents").html(e.target.result);
            };
            reader.readAsText(this.files[0]);
          };
        });

        $("#downloadInput").click(function(){
          var element = document.createElement('a');
          filecontents = $('#contents').html();
          // do scrubbing here
          //

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

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

          element.click();

          document.body.removeChild(element);
        });
      });
    </script>

  </head>

  <body>
    <div id="contents">
      Content here
    </div>

    <input type="file" id="fileInput" class="btn">
    <button type="button" id="downloadInput" class="btn">Download</button>
  </body>

</html>

Save Div Contents as a file and Load Div Contents from file?

2 Answers2