Question 36883 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

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

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>
Tags:

2

Answers


  1. 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

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search