Question

Imagine I have a 3 column layout. Left, center and right div. I want to export only the center div. This is my export method so far:

function getHtml() {
    var htmlStartTag = function(){
        var attrs = $('html')[0].attributes;  
        var result = '<html';
        $.each(attrs, function() { 
            result += ' ' + this.name + '="' + this.value + '"';
        });                                               
        result += '>';
        return result;
    }    

return htmlStartTag() + $('html').html() + '</html>';
}

My question is, how can I save the DOM to a html file, say template.html? When the user clicks export, the entire DOM should be saved or downloaded as html file. Is this possible, can you give an example? My application just uses jquery and html. It is not a serverside application!

Answer 1

You can use data:URI, as seen in Using HTML5/Javascript to generate and save a file (2nd answer, the one with the 50+ upvotes)

something like http://jsfiddle.net/gBxrB/ should do the trick in your case.

HTML

<div class="left">leftleftleft</div>
<div class="center">center</div>
<div class="right">rightrightright</div>
<a href="#" class="export">export</a>​

JS

$('a.export').on('click',function(){
   uriContent = "data:application/octet-stream," + encodeURIComponent( $('.center').html() );
   window.open(uriContent, 'myDocument');
});