Export html and css to a file using jquery

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!

@ArtWorkAD: See this post: http://stackoverflow.com/questions/6427576/javascript-jquery-html-export-dom-structure-page-to-html-file-or-text — Ahsan Khurshid, Jul 30 '12 at 11:40

score 5 · Accepted Answer · edited May 23 '17 at 11:45

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');
});

score 0 · Answer 2 · answered Jul 30 '12 at 11:36

0

You cant save files with javascript

answered Jul 30 '12 at 11:36

SG 86

6,974
3
25
34

Export html and css to a file using jquery

2 Answers2