how to save dynamically changed ( byjquery ) html DOM?

Question

I got some nice layout generator using jquery dynamic forms, and jquery ui features to change number of used elements, their css properties etc. Everything looks great but there is one problem with presentation of current result. I would like to save generated html DOM and parse it somehow ( delete hidden elements from DOM tree etc ). Any ideas how to save current (modified) html + css?

Answer 1

Solution using jquery follows:

Step 1:

convert the whole (modified) html to a string representation:

var html = $('html').clone();
var htmlString = html.html();

Step 2:

Base64 encode the htmlString and put it into a datauri inside a hyperlink:

var datauri = "data:text/html;charset=utf-8;base64," + $base64.encode(htmlString);
$("body").append("<a href='" + datauri + "'>Save</a>");

Note: I'm using this library for base64 encoding above.

Step 3:

Right-click on the 'Save' link dynamically created above and choose "Save As" from the browser's context menu. Your modified html file will be saved as a new html document on your local filesystem.

I've tried this before and it works. Hope it will work for you and others as well. This solution works without any server-side technology, nor does it require Flash, Java applets, Active-X controls, XPCOM or any proprietary client-side technology. The only thing required is any (modern) browser that supports data-uris.