Save Current Page as HTML to Server

Save current page as HTML to server

If you meant saving the output of a page in a file, you can use buffering to do that. The function you need to use are ob_start and ob_get_contents.

<?php
// Start the buffering //
ob_start();
?>
Your page content bla bla bla bla ...

<?php
echo '1';

// Get the content that is in the buffer and put it in your file //
file_put_contents('yourpage.html', ob_get_contents());
?>

This will save the content of the page in the file yourpage.html.

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

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>

Is there a way to save previous html page and load it in current page on reload?

I dont think you can achieve this just using JS. You will have to rely on some storage mechanism . Because we are dealing with page reloads.

  1. Offload some logic to the backend. Keep track of things via cookies(session storage).
  2. Use local storage to keep track of these links.

How to save current html to file on server?

Ok, your buffering seems to work fine

Try with this code :

$res = file_put_contents('C:\yourpage.html', ob_get_contents());
var_dump($res);

My response, is to write your data in a file that is located in absolute path

Also, i need the contents of $res

HTML page that save its content, replacing the HTML file itself

Finally, because we can use PHP we decided to do this:
we put this in a file called "prova.php" and we launch this. This file shows the content of 'file.html' and save in 'salva.php' sending the data to save.

 <?php include('file.html');?> 

some added string
</div>

<button onclick="save()">SAVE</button>

<script>

function save(){

var newData=document.getElementById("myText").innerHTML;
$.post( "salva.php", { data: newData} );
}
</script>

The file to save called salva.php, receive the string and save in an existing file called "file.html".

<?php

$stringa=$_POST['data'];

$ourFileName = "file.html";
$ourFileHandle = fopen($ourFileName, 'w') or die("can't open file");
fwrite($ourFileHandle,$stringa);
fclose($ourFileHandle);

?>

file.html is a file that contains nothing at the beginning

Save HTML locally with Javascript

Chromium's File System Access API (introduced in 2019)

There's a relatively new, non-standard File System Access API (not to be confused with the earlier File and Directory Entries API or the File System API). It looks like it was introduced in 2019/2020 in Chromium/Chrome, and doesn't have support in Firefox or Safari.

When using this API, a locally opened page can open/save other local files and use the files' data in the page. It does require initial permission to save, but while the user is on the page, subsequent saves of specific files do so 'silently'. A user can also grant permission to a specific directory, in which subsequent reads and writes to that directory don't require approval. Approval is needed again after the user closes all the tabs to the web page and reopens the page.

You can read more about this newish API at https://web.dev/file-system-access/. It's meant to be used to make more powerful web applications.

A few things to note about it:

  • By default, it requires a secure context to run. Running it on https, localhost, or through file:// should work.

  • You can get a file handle from dragging and dropping a file by using DataTransferItem.getAsFileSystemHandle

  • Initially reading or saving a file requires user approval and can only be initiated via a user interaction. After that, subsequent reads and saves don't need approval, until the site is opened again.

    Sample Image

  • Handles to files can be saved in the page (so if you were editing 'path/to/file.html', and reload the page, it would be able to have a reference to the file). They can't seemingly be stringified, so are stored through something like IndexedDB (see this answer for more info). Using stored handles to read/write requires user interaction and user approval.

Here are some simple examples. They don't seem to run in a cross-domain iframe, so you probably need to save them as an html file and open them up in Chrome/Chromium.

Opening and Saving, with Drag and Drop (no external libraries):

<body>
<div><button id="open">Open</button><button id="save">Save</button></div>
<textarea id="editor" rows=10 cols=40></textarea>
<script>
let openButton = document.getElementById('open');
let saveButton = document.getElementById('save');
let editor = document.getElementById('editor');
let fileHandle;
async function openFile() {
try {
[fileHandle] = await window.showOpenFilePicker();
await restoreFromFile(fileHandle);
} catch (e) {
// might be user canceled
}
}
async function restoreFromFile() {
let file = await fileHandle.getFile();
let text = await file.text();
editor.value = text;
}
async function saveFile() {
var saveValue = editor.value;
if (!fileHandle) {
try {
fileHandle = await window.showSaveFilePicker();
} catch (e) {
// might be user canceled
}
}
if (!fileHandle || !await verifyPermissions(fileHandle)) {
return;
}
let writableStream = await fileHandle.createWritable();
await writableStream.write(saveValue);
await writableStream.close();
}

async function verifyPermissions(handle) {
if (await handle.queryPermission({ mode: 'readwrite' }) === 'granted') {
return true;
}
if (await handle.requestPermission({ mode: 'readwrite' }) === 'granted') {
return true;
}
return false;
}
document.body.addEventListener('dragover', function (e) {
e.preventDefault();
});
document.body.addEventListener('drop', async function (e) {
e.preventDefault();
for (const item of e.dataTransfer.items) {
if (item.kind === 'file') {
let entry = await item.getAsFileSystemHandle();
if (entry.kind === 'file') {
fileHandle = entry;
restoreFromFile();
} else if (entry.kind === 'directory') {
// handle directory
}
}
}
});
openButton.addEventListener('click', openFile);
saveButton.addEventListener('click', saveFile);
</script>
</body>

Storing and Retrieving a File Handle using idb-keyval:

Storing file handles can be tricky, since they can't be unstringified, though apparently they can be used with IndexedDB and mostly with history.state. For this example we'll use idb-keyval to access IndexedDB to store a file handle. To see it work, open or save a file, and then reload the page and press the 'Restore' button. This example uses some code from https://stackoverflow.com/a/65938910/.

<body>
<script src="https://unpkg.com/idb-keyval@6.1.0/dist/umd.js"></script>
<div><button id="restore" style="display:none">Restore</button><button id="open">Open</button><button id="save">Save</button></div>
<textarea id="editor" rows=10 cols=40></textarea>
<script>
let restoreButton = document.getElementById('restore');
let openButton = document.getElementById('open');
let saveButton = document.getElementById('save');
let editor = document.getElementById('editor');
let fileHandle;
async function openFile() {
try {
[fileHandle] = await window.showOpenFilePicker();
await restoreFromFile(fileHandle);
} catch (e) {
// might be user canceled
}
}
async function restoreFromFile() {
let file = await fileHandle.getFile();
let text = await file.text();
await idbKeyval.set('file', fileHandle);
editor.value = text;
restoreButton.style.display = 'none';
}
async function saveFile() {
var saveValue = editor.value;
if (!fileHandle) {
try {
fileHandle = await window.showSaveFilePicker();
await idbKeyval.set('file', fileHandle);
} catch (e) {
// might be user canceled
}
}
if (!fileHandle || !await verifyPermissions(fileHandle)) {
return;
}
let writableStream = await fileHandle.createWritable();
await writableStream.write(saveValue);
await writableStream.close();
restoreButton.style.display = 'none';
}

async function verifyPermissions(handle) {
if (await handle.queryPermission({ mode: 'readwrite' }) === 'granted') {
return true;
}
if (await handle.requestPermission({ mode: 'readwrite' }) === 'granted') {
return true;
}
return false;
}
async function init() {
var previousFileHandle = await idbKeyval.get('file');
if (previousFileHandle) {
restoreButton.style.display = 'inline-block';
restoreButton.addEventListener('click', async function (e) {
if (await verifyPermissions(previousFileHandle)) {
fileHandle = previousFileHandle;
await restoreFromFile();
}
});
}
document.body.addEventListener('dragover', function (e) {
e.preventDefault();
});
document.body.addEventListener('drop', async function (e) {
e.preventDefault();
for (const item of e.dataTransfer.items) {
console.log(item);
if (item.kind === 'file') {
let entry = await item.getAsFileSystemHandle();
if (entry.kind === 'file') {
fileHandle = entry;
restoreFromFile();
} else if (entry.kind === 'directory') {
// handle directory
}
}
}
});
openButton.addEventListener('click', openFile);
saveButton.addEventListener('click', saveFile);
}
init();
</script>
</body>

Additional Notes

Firefox and Safari support seems to be unlikely, at least in the near term. See https://github.com/mozilla/standards-positions/issues/154 and https://lists.webkit.org/pipermail/webkit-dev/2020-August/031362.html

save html page from the server by URL with no changes - get the exact copy, the clone

I'd delete the comment after saving from Chrome, use wget in a linux environment, or open the page as an InputStream in Java. Do all three, run a diff, and if two arrived identical assume that's the file on the server.

Why do you need a byte-for-byte copy of the file on the server anyway, and why can't you ftp the file? There is always the chance that the server will serve different html files depending on your user-agent, but there are other tools which may be better than Chrome for getting your copy and many can spoof a user-agent as well.



Related Topics



Leave a reply



Submit