Question

在打印带有固定标题的表时，我需要保留默认的引导CSS，但由于表可垂直滚动，因此需要覆盖与溢出相关的几种样式。

基本上我想保留targetStyles：['*']以匹配我的引导CSS模板中的内容，但需要覆盖tbody {overflow：auto}和另一种自定义样式的.table-sensitive {overflow-x：auto }。如何保留所有引导CSS，但要为打印作业更改这两种样式？

我尝试使用targetStyles：和style：以及这两种样式的列表。 https://printjs.crabbly.com/#documentation在这种情况下很有帮助，但还不直观

/* my table is contained in a div with id of #howDoingTable */
printJS({
   printable: 'howDoingTable',
   type: 'html',
   targetStyles: ['*'],
   style: '#howDoingTable tbody {overflow:none;} #howDoingTable.table-responsive {overflow-x:none;}'              
});
/*It's ignoring the style with the two overrides I want to implement via style:*/

Answer 1

除非当前提供的printJS不可能做到这一点，否则我发现解决方法是在调用printJS之前更改需要更改的样式，然后再通过jQuery重新启用它们：

      //change overflow css to visible to remove scrolling in the ui
      $("#howDoingTable.table-responsive").css("overflow-x","visible");
      $("#howDoingTable tbody").css("overflow","visible");
      printJS({
          printable: 'howDoingTable',
          type: 'html',
          targetStyles: ['*']            
      });
      //change the overflow css properties back to scrolling
      $("#howDoingTable.table-responsive").css("overflow-x","auto");
      $("#howDoingTable tbody").css("overflow","auto");

用printJS覆盖CSS

1 个答案: