14

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?

Cœur
  • 37,241
  • 25
  • 195
  • 267
andy
  • 141
  • 1
  • 1
  • 4
  • Save it to where? To a cookie? – James Dec 21 '10 at 10:13
  • If you need to save it to a file, then you can use Firebug for it. It will also show the changes that JQury have made to the dom tree. – Tyde Dec 21 '10 at 10:36
  • Is there a way to do that by node.js? I mean can I create js script, that I could run from command line using node.js that would do html-file -> html-file transformation? – Hurda Feb 12 '15 at 21:59

3 Answers3

15

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.

jpaugh
  • 6,634
  • 4
  • 38
  • 90
tsaixingwei
  • 636
  • 9
  • 13
  • I've been thinking along similar lines, but anyone going this route should be aware of the [wide variations in supported data URI length](http://stackoverflow.com/questions/695151/data-protocol-url-size-limitations). See John Saunders' answer in particular. – mrec Aug 16 '13 at 16:22
  • Good ol' client-side JavaScript: The link for this still works, even on the Web Archive; so it was not relying on a server-side component. – jpaugh Jul 15 '19 at 22:28
0

There is another way if you use chrome.

  1. Open "development tools" (trl+mayus+i on windows)
  2. Go to "elements" tab. You will see the actual (modified) DOM
  3. Find the node you are interested (probably HTML or BODY but could be any), right click and select COPY AS HTML
  4. Paste in your favorite text editor and save.

The solution provided by tsaixingwei works fine on small DOMs, but when you have large documents it will not work. I've just tried with a doccument containing about 30K lines and had to use the method i've just explained.

ButterDog
  • 5,115
  • 6
  • 43
  • 61
0

As a first step you can use

var $alteredHtml = $('html').clone();
// use jQuery here to make alterations to the cloned html (parse it)

but to save it you will need some server side technology, to either save it to a file or a database.

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317