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

Question

我正在尝试将整个页面导出为 PDF。在某些情况下，如果 CSS 从单独的文件加载，则不会应用于导出的 PDF。所以我尝试使用这段代码将所有 CSS 转换为内联。

(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。希望我的问题很清楚。感谢您的帮助。

Answer 1

在此代码段中，有两种比修改样式表更简单的方法:

1. 隔离 <iframe> , <embed> , 或 <object>通过围绕它包装一个元素然后应用引用包装器元素的样式。这在带有 div.jframe 的代码片段中进行了演示作为包装器。
2. 注入(inject) <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>