克隆，播放和替换克隆的Dom-Javascript/Jquery

我试图将整个页面导出为PDF。在某些情况下，如果从单独文件加载CSS不会应用于导出的PDF。所以我试图使用这段代码将所有的CSS转换为内联。克隆，播放和替换克隆的Dom-Javascript/Jquery

(function ($) { 
    var rules = document.styleSheets; 
    for(var rl in rules){ 
     var rule = rules[rl].cssRules; 
     try{ 
     for (var idx = 0, len = rule.length; idx < len; idx++) { 
     $(rule[idx].selectorText).each(function (i, elem) { 
      if($(elem).is(":visible")) 
      elem.style.cssText += rule[idx].style.cssText; 
     }); 
     } 
     }catch(e){ 
    console.log(e); 
    } 
    } 

})(jQuery);

运行此代码后，我导出的PDF工作正常。但我的DOM不像以前那样。无论如何，在操作之前我可以克隆我的DOM，并且在使用DOM之后像以前一样替换克隆的DOM。希望我的问题很明确。谢谢你期待的帮助。

来源

2017-03-27 Vignesh Gopalakrishnan

你如何导出为PDF - 听起来更像是在无论是这样做 –

我使用Canvg插件SVG转换为Canvas和JSPDF错误将其转换为PDF。如果您有小册子地图，则由于未在导出的PDF中应用CSS，所以其中的所有拼贴都会被加密。希望你有我想说的。 –

在这个片段中有2点更简单的方法比修改一个样式表：

隔离通过包装元素，<embed>，或<object>周围则应用样式引用包装元素。这在片段中用div.jframe作为包装来演示。
用新规则集注入<style>块。

如果两者中的任何一个都以适度的护理完成，则不应留有冲突的风格。

注意： iframe中的PDF是沙盒，所以它不在那里，但一切仍然适用。

代码片段

function injectStyles(rule) { 
 
    document.body.insertAdjacentHTML('afterbegin', 
 
    '&shy;<style>' + rule + '</style>'); 
 
} 
 

 
injectStyles('iframe:hover { border: 5px solid blue; }');

.jframe iframe { 
 
    outline: 10px solid tomato; 
 
}

<div class='jframe'> 
 
    <iframe src='http://che.org.il/wp-content/uploads/2016/12/pdf-sample.pdf' height='400' width='400'></iframe> 
 
</div>

来源

2017-03-27 12:30:32 zer00ne

克隆，播放和替换克隆的Dom-Javascript/Jquery

回答

相关问题