用 printJS 覆盖 css答案

【问题标题】：Override css with printJS用 printJS 覆盖 css
【发布时间】：2019-07-23 00:37:23
【问题描述】：

在打印带有固定标题的表格时，我需要保留默认的引导 css，但需要覆盖一些与溢出相关的样式，因为表格可以垂直滚动。

基本上我希望保留 targetStyles: ['*'] 以匹配我的引导 css 模板中的内容，但需要覆盖 tbody {overflow:auto} 和另一个自定义样式的 .table-responsive {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:*/

【问题讨论】：

标签： printjs

【解决方案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");

【讨论】：