CODEWITHSUNDEEP
javascript
jscripter
jscripter

Reputation: 840

Save HTML with javascript generated styles

I'd like to save this webpage as html

http://www.wix.com/demone2/cupcakes-shop

but the saved file is too much different because the page has a bootstrap.js which generates styles for the classes wysiwyg_viewer_skins...

The closest answer I found is this

Get HTML with current styles (maybe inlined) of a page that finished rendering and finished running scripts

but I tried his phantomjs code and it makes all images datauri and doesn't work it very well with this page

Upvotes: 2

Views: 1032

Answers (2)

jscripter
jscripter

Reputation: 840

I made this code to save all styles definition in a string so then it could be saved into an external css file

var str = '';
for (var i = 0; i < document.styleSheets.length; i++) {
    var rules = document.styleSheets[i].cssRules;
    if(rules != null){
        for(var j=0; j < rules.length; j++) {
            str += rules[j].cssText;
        }   
    }
}

Well. since there was about 700 rules, it took about 15 seconds to display in the console. But it worked

Upvotes: 1

GillesC
GillesC

Reputation: 10874

Open that page in Chrome

Open the developer tools Ctrl + Shift + i

Go to the Elements tag

Right click on the HTML tag and select copy as HTML

That will put in the clipboard the rendered HTML as modified by Javascript, now paste it at your convenience.

Probably something equivalent can be found on other browsers, also IE sometimes takes few refresh to get it right.

Upvotes: 1

Related Questions