我有一个使用角材料组件（版本6）的angular 6应用程序。当我尝试打印时，它仅打印第一页（使用Google Chrome）。可以在stackblitz上看到一个示例。我已经尝试了许多媒体查询，例如通过设置以下样式，但没有区别
body,
html,
.mainContainer{
height: auto;
overflow-y: visible;
overflow-x: visible;
}
答案 0 :(得分：3)
我最近遇到了类似的问题，不是解决方案，而是经过大量代码检查后发现的解决方法。
我正在使用角度材料库v9中的sidenav。
@media print {
.mat-drawer-container , .mat-drawer-content {
overflow: visible !important;
}
}
这似乎有助于打印所有页面。
答案 1 :(得分：0)
您的问题是，当您的应用内容溢出页面时，不是{em> <body>标记可滚动，而是<body>标记的子代。 / p>
为了使浏览器正确处理打印分页，您需要更新应用程序的样式，以便<body>标签可以滚动。 This is similar reasoning to why the material docs say you need to use the fixed mat-sidenav option on mobile devices.
查看您的示例应用程序，我可以看到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中）可以正常打印。