vaadin-与CSS打印网格

Question

vaadin-grid.css 我设法获得了包含网格行的#table

元素“>

，例如，

#table th {
  backround-color:green;
}

我可以更改其颜色。

现在，我只需要在打印页面时才做

@media print {
 #table th {
   backround-color:green;
  }
}

。打印（）。 我在封闭的网格中添加了一个 id =“ viewfgrid” （如屏幕截图所示） 内部共享风格

@media print {
     #viewfgrid {
       outline:green;
      }
    }

我可以在打印时访问和更改网格。

但是，我无法使用行访问内表。我尝试了各种变体，例如

 @media print {
     #viewfgrid #table {
       background-color:green;
     }
}


 @media print {
 #viewfgrid :host > table {
       background-color:green;
    }  
 }

但没有效果。

如何访问该桌子？

另外，作为次要问题，为什么我可以在vaadin-grid.css中访问#table而不准备：主机？当我这样做时，它没有

效果

Answer 1

我不确定为什么@Media Print在网格的阴影DOM样式中无法使用。您是否尝试过不同的浏览器？我想知道这里是否有一些浏览器错误/限制，类似于您无法在Shadow dom内定义@font-face。

作为次要问题，为什么我可以从vaadin-grid.css中访问#table而不准备：主机？当我这样做时，它没有效果

主机选择器的目标是与#viewfgrid ID相同的元素。要选择具有特定ID的主机元素，您可以在阴影DOM样式内使用：host（#viewfgrid）。

请注意，在造型Vaadin组件时，您不应依靠任何ID，类名称或原始标签名称选择器（例如#Table或th。这些被视为内部实现详细信息/私有API，可以在任何版本中更改。选择器和状态属性选择器（用于示例，[focused]）

。 ” https://developer.mozilla.org/en-us/docs/web/css/:: part“ rel =” nofollow noreferrer“> :: part（）选择器，它允许您从外部/轻/dom样式中样式的命名零件。这实际上是一种比依赖更强大的方法 注入阴影DOM（通过frontend/mytheme/components/vaadin-grid.css文件

将样式

@media print {
  #viewfgrid::part(cell) {
    background-color: green;
  }
}

）文档显示网格的所有可用部分（查找“样式”部分）： https://cdn.vaadin.com/vaadin-web-components/23.2.0-alpha3/#/elements/vaadin-grid

Answer 2

网格是设计不太印刷友好的，因为它是为“无限垂直滚动”设计的。例如，您不会每个页面都有标题和页脚。如果要将“报告”功能包含在应用程序中，则最好的方法是创建设计的单独的报告视图而不是屏幕使用。这将使您可以在其中使用不同的布局和组件。例如，您可以为每个页面生成多个网格。或使用 beantable 目录中的组件，这些组件来自目录，它们会生成无阴影dom的html表。

Answer 3

因为显然，当元素上没有“零件”标签时，您无法从CSS访问Shadow dom，就像此 table 一样，我通过使用JavaScript（如

UI.getCurrent().getPage().executeJs("const tabledom = document.querySelector(\"#viewfgrid\").shadowRoot.querySelector(\"#table\");
             tabledom.style.cssText+='.....' "

：当用户单击打印按钮时，可以使用摘要来调用摘要，您可以使用元素的样式进行操作。在我的情况下，我将桌子弄平，以便可以在不介入的情况下打印它。