如何使用javascript将html保存到服务器文件夹中的.html文件

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);
    }

Answer 1

There is a working code needs only the server side PHP file called 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); $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>