How make a dynamic or generated HTML page savable?

Question

I am still a bit new to dojo, javascript and HTML coding. I inherited ownership of an HTML page which is coded using dojo 1.4.2 (will be upgrading in the future) and javascript. Essentially the HTML page contains a form which is initially displayed to the user. After the user fills out the form and submits it, the form is replaced with generated content based on their answers.

This is done by using the answers in the form to reveal or hide various div elements that are already contained in the HTML file. So the form is hidden and some subset of other div elements are revealed.

We'd like this generated page to be savable by the user as a static HTML page. So essentially we want to save only the displayed divs to the file rather than the whole page. Currently, a save just saves a local copy which would require a user to re-submit the form on each view.

I was told this could be done by passing data to a service (possibly a JSP) which would handle this and pass back to the browser. However, I am not familiar with this and haven't been able to find any examples. Is there a way to do this and does anybody have any examples or documentation that I could be pointed to?

Ideally, I'd like to insert a save button which saves the generated content being viewed in the browser without actually creating a static HTML that will stay on the server.

Thanks in advance.

Answer 1

How about a bookmarklet like this?

javascript:document.location='data:text/html,'+document.all[0].innerHTML;

It works by accessing the HTML representation of the current DOM, and then redirects to a new page that's built from HTML markup using the Data URI scheme.

The new page can easily be saved using your browser's regular save menu-item. Note that relative URLs won't survive this transformation, so the saved page may lose its stylesheet/script/image references.