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

Question

I'm trying to export the whole page as PDF. During certain situation's like, if the CSS is loaded from separate file is not applied in exported PDF. So I'm trying to convert all CSS as inline using this code.

(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);

After I ran this code, my exported PDF is working good. But my DOM is not as before. So is there anyway where I can clone my DOM before operations, and replace the cloned DOM as before after playing with DOM. Hope my question is clear. Thanks in anticipation for the help.

Answer 1

In this Snippet there are 2 much more simpler ways than modifying a stylesheet:

1. Isolate the <iframe> , <embed> , or <object> by wrapping an element around it then apply styles referencing the wrapper element. This is demonstrated in the Snippet with div.jframe as the wrapper.
2. Inject a <style> block with new rulesets.

If either one is done with moderate care, you shouldn't be left with conflicting styles.

Note: The PDF in the iframe is sandboxed, so it's not there but everything still applies.

SNIPPET

 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>