How to save html to .html file in folder on server with javascript

Question

I'm writing a tool for my website like an admin panel where you can add some elements to the page. Using javascript I add elements and then if save button is pressed everything should save automatically like "smth.html" to the same folder where the js script is.

I've spent a lot of time searching right scripts for it but nothing works

Can you advise me some solution to this problem, please? Is it possible to do it with code below? Code bellow helps to download it from webpage, but I need to save it to the server with script

thanks for your help!


<div class="row form-group">
   <div class="col-md-12">
      <input type="button" onclick="addCard()" id="addBtn" value="Добавить"
          class="btn btn-primary py-2 px-4 text-white btn-lg">
      <input type="button" onclick="saveHtml()" value="Сохранить"
          class="btn btn-primary py-2 px-4 text-white btn-lg">
   </div>
</div>


function saveHtml() {
    var html = document.querySelector("html").innerHTML;

    download("saved.html", html);
}


function download(filename, text) {
        var element = document.createElement('a');
        element.setAttribute('href', 'data:text/plain;charset=utf-8,' +
            encodeURIComponent(text));
        element.setAttribute('download', filename);

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

        element.click();

        document.body.removeChild(element);
    }

Do you want to save file into the server or download the file directly ? — Adnane Ar
– Adnane Ar, Commented Sep 15, 2019 at 13:12
Is this the right script you used in your code? If yes, can you confirm that this "download" function will not be as same as its here in example. You have "download" function inside the another "download" function. Please confirm this first. — Aakash Kumar
– Aakash Kumar, Commented Sep 15, 2019 at 13:14
@AdnaneAr Hello! Im trying to save into the server because my site will take this data to show =) — Sad Santa
– Sad Santa, Commented Sep 15, 2019 at 13:14
@SadSanta Okey I am working on a code and I will add it as an answer on the post give me a moment ! — Adnane Ar
– Adnane Ar, Commented Sep 15, 2019 at 13:16
@AdnaneAr I've mistaken with function but it saves to computer. Thanks a lot for your help im waiting <3 — Sad Santa
– Sad Santa, Commented Sep 15, 2019 at 13:19

Sad Santa · Accepted Answer · 2019-09-15 21:51:49Z

There is a working code needs only the server side PHP filecalled file_saver.php where you will receive the POST Data ( innerHTML content is encoded to base64 ) you can just use this code : $html=base64_decode(urldecode($_POST['innerHTML'])); $filename=trim($_POST['filename']); file_put_contents($filename, $html);

Also don't forget to change folder RULES you want to write to on server: chmod 777 /var/www/html

function saveHtml() {
  let html = document.documentElement;
  download("saved.html", html);
}

function download(filename, contentElement){
  let fileSaverPath="./file_saver.php";

  var xhr = new XMLHttpRequest();
  xhr.open("POST", fileSaverPath, true);

  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

  xhr.onreadystatechange = function() {
      if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
        window.alert("file saved !");
      }
  }
  
  let encodedHtml=contentElement.innerHTML.toString();
  
  xhr.send("filename="+filename+"&innerHTML="+btoa(unescape(encodeURIComponent(encodedHtml))));
  
  //document.documentElement.innerHTML=encodedHtml;
  
}

<div class="row form-group">
   <div class="col-md-12">
      <input type="button" onclick="addCard()" id="addBtn" value="Добавить" class="btn btn-primary py-2 px-4 text-white btn-lg">
      <input type="button" onclick="saveHtml()" value="Сохранить" class="btn btn-primary py-2 px-4 text-white btn-lg">
   </div>
</div>

By the way the code snippet doesn't work for some reasons but the code is working generaly on all browsers !
I get this DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range. at download (localhost:63343/sky/admin/js/rewievBuilder.js:83:49) at saveHtml (localhost:63343/sky/admin/js/rewievBuilder.js:64:5) at HTMLInputElement.onclick (localhost:63343/sky/admin/…) I should put all files together right?

Collectives™ on Stack Overflow

How to save html to .html file in folder on server with javascript

1 Answer 1

8 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Related