打印时隐藏不同组件的主体 - Angular答案

【问题标题】：hide body from different component while printing - Angular打印时隐藏不同组件的主体 - Angular
【发布时间】：2019-01-22 18:22:21
【问题描述】：

包含两个组件数据的窗口，即搜索组件和结果组件。根据搜索条件，结果将显示在搜索条件组件下方的结果组件 ag-Grid 中。现在我试图通过 css 样式只打印 ag-grid 数据。在除 agGrid 之外的 css 中，剩下的 body 和所有的隐藏。但问题是结果网格内容被隐藏，但搜索条件内容仍然可见并被网格数据覆盖。那么如何从结果组件中隐藏搜索条件内容。

这是我在结果组件中的 css：

@media print {
   body * {
      visibility: hidden;
    }
    #myGrid, #myGrid * {
      visibility: visible;
    }
    #myGrid {
      position: absolute;
      left: 0;
      top: 0;
    }
  }

结果组件 ts 中的打印功能：

nBtPrint() {
      var gridApi = this.gridApi;
      this.setPrinterFriendly(gridApi);
      setTimeout(() => {
        this.setNormal(gridApi);
      }, 2000);
    }
    setPrinterFriendly(api) {
      api.setDomLayout("print");
    }
  setNormal(api) {
      window.close();
      api.setDomLayout(null);
    }

【问题讨论】：

标签： angular ag-grid

【解决方案1】：

如果没有看到完整的源代码很难说，例如 html 模板。

但是尝试使用

display: none

而不是 CSS 中的 visibility: hidden。

将显示设置为无将从布局中删除一个元素，而将可见性属性设置为隐藏则不是这种情况。

【讨论】：