JavaScript / Jquery HTML Export DOM Structure/Page to HTML File or Text

Question

I want to modify through the dom various element properties and then save that page as an html file. View source doesn't always reflect dom adjustments. Is there a way to write the whole page to a file or otherwise get the updated source page into a file?

Answer 1

I'm thinking this should do the trick for ya.

$('html').html();

JavaScript can't write files when being ran from a browser (security). But you can send this to a PHP script and write it to a file from there. For example:

$.post('write.php', { dom : $('html').html() });

write.php

file_put_contents('new.html', urldecode($_POST['dom']));

Answer 2

In newish browsers (IE 10, FF 20, Chrome 26, Safari 6, Opera 15), you can create a Blob and save it into a file using window.URL.createObjectURL.

Demo, Reference:

objectURL = window.URL.createObjectURL(blob);

• Where blob is a File object or a Blob object to create a URL object for.
• objectURL is the generated object URL. The entire contents of the specified file are represented by the text of the URL. It can then be used in window.open.

Example of a Blob:

var parts = ["<p class=\"paragraph\"><a id=\"link\">hey!<\/a><\/p>"];
new Blob(parts, { "type" : "text\/html" });

To list current Blobs in Chrome execute the following in your address bar:

chrome://blob-internals