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

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("Save");

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.