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

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 >
    Content here
</div>
        
<a href='link.html' download>
    <button>Save Content</button>
</a>

<button>Load Content</button>

CodePudding user response：

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

CodePudding user response：

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" >
    <button type="button" id="downloadInput" >Download</button>
  </body>

</html>