在 Angular 2 中使用 window.print() 只打印一页答案

【问题标题】：Using window.print() in angular 2 print only one page在 Angular 2 中使用 window.print() 只打印一页
【发布时间】：2018-04-23 05:43:18
【问题描述】：

我将用于打印的 html 放入 div 类 forPrint 中，该类位于材质对话框页面中，并在单击角度组件中的打印按钮时调用 window.print()。
但是，它仅显示/打印当前屏幕中的页面，其余页面在单击按钮时被切断。
如何使用 forPrint 类打印 div 中的全部内容？
我认为原因是材料对话框，因为当我在普通页面中打印某些内容时，它可以正常工作。

CSS：

@media print {
    /deep/ body * { visibility: hidden; }
    /deep/ .forPrint * { visibility: visible; display:block;}
    /deep/ .forPrint { display:block;position: absolute; top: 40px; left: 30px; } 

}

【问题讨论】：

它可能与position: absolute; 相关，并且只提供顶部/左侧...添加bottom:40px; right:30px;（我假设您已经完成上述操作以在打印文档中添加边距）
我认为原因是材料对话框，因为当我在普通页面中打印某些内容时，它可以正常工作

标签： javascript css angular

【解决方案1】：

我在使用材质sidenav时遇到了这样的问题。尝试在 sidenav 容器之外创建 forPrint div。

【讨论】：

【解决方案2】：

打印 class-forPrint 的全部内容或使用 CSS 下面的页面

@media print {
      body, html, .forPrint{
          width: 100%;
          height:100%;
      }
}

【讨论】：