使用 javascript 生成的样式保存 HTML答案

【问题标题】：Save HTML with javascript generated styles使用 javascript 生成的样式保存 HTML
【发布时间】：2014-07-08 12:04:01
【问题描述】：

我想将此网页另存为 html

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

但是保存的文件差别太大了，因为页面有一个 bootstrap.js，它为 wysiwyg_viewer_skins 类生成样式...

我找到的最接近的答案是这个

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

但我尝试了他的 phantomjs 代码，它使所有图像都成为 datauri 并且在此页面上不能很好地工作

【问题讨论】：

标签： javascript

【解决方案1】：

在 Chrome 中打开该页面

打开开发者工具Ctrl + Shift + i

转到Elements标签

右键点击 HTML 标签并选择copy as HTML

这会将经过 Javascript 修改的渲染 HTML 放入剪贴板，现在将其粘贴到您方便的地方。

可能在其他浏览器上可以找到等效的东西，IE 有时也需要很少刷新才能正确。

【讨论】：

好吧。我试过了，但它不会保存 javascript 生成的样式

【解决方案2】：

我编写此代码以将所有样式定义保存在一个字符串中，以便可以将其保存到外部 css 文件中

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

嗯。由于大约有 700 条规则，因此在控制台中显示大约需要 15 秒。但它奏效了

【讨论】：