Angular 6 Material 应用程序仅打印第一页

Question

我有一个使用角材料组件（版本 6）的角 6 应用程序。当我尝试打印时，它只打印第一页（使用 Google Chrome）。一个例子可以在stackblitz上看到。我已经尝试了许多媒体查询，例如通过设置以下样式，但没有任何区别

  body,
  html,
 .mainContainer{
  height: auto;
  overflow-y: visible;
  overflow-x: visible;
  }

Answer 1

我最近遇到了类似的问题，不是解决方案，而是经过大量代码检查后找到的解决方法。

我正在使用角度材料库 v9 中的 sidenav。

@media print {
  .mat-drawer-container , .mat-drawer-content {
    overflow: visible !important;
  }
}

这似乎有助于打印所有页面。

Answer 2

您的问题是，当应用程序的内容溢出页面时，不是标签变得<body>可滚动，而是标签的子标签<body>。

为了使浏览器能够正确处理打印分页，您需要更新应用程序的样式，以便标签<body>能够滚动。这与材料文档说您需要在移动设备上使用 mat-sidenav 选项的原因类似fixed。

查看您的示例应用程序，我可以看到 body 标签的高度为 10 像素。所有的书面内容都position: absolute破坏了布局。更新样式，使 body 标签为全高并且一切正常（我刚刚在您的 stackblitz 示例中测试了这一点，并可以确认它解决了问题）。

作为一种解决方案，只需更新sidenav-responsive-example.css文件即可删除position: absolute修复问题。

.example-container {
  display: flex;
  flex-direction: column;
  top: 0;
  left: 0;
  right: 0;
}

更新

实际上，你的 stackblitz 示例对我来说打印得很好（在 Google Chrome 中），没有变化。