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

在这个片段中，有两种比修改样式表更简单的方法：

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

如果任何一个人都得到温和的照顾，你就不应该留下相互冲突的风格。

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

<强>段

＆＃13;

function injectStyles(rule) {
  document.body.insertAdjacentHTML('afterbegin',
    '&shy;<style>' + rule + '</style>');
}

injectStyles('iframe:hover { border: 5px solid blue; }');

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: