html - 角材料表打印视图

问题描述

我正在使用角度材料版本 9.2.4 并创建了一个带有分页的数据表。我希望我的用户能够打印此表格，我已经使用@media print 从页面中删除了所有不必要的元素，但是表格的行为很奇怪。如果由于行数而无法容纳该页面，我希望我的表格行中断到新页面，但它只是跳过剩余的数据。

到目前为止我已经尝试过：

将此添加到我的CSS：

table {
  page-break-inside: auto;
}
tr {
  page-break-inside: avoid;
  page-break-after: auto;
  display: inline-block;
}
thead {
  display: table-header-group;
}
tfoot {
  display: table-footer-group;
}

将所有表格元素包装在 div 中，因为我读过上面的 CSS 属性可以忽略非块显示元素。
```
$(document).ready(function(){$("table tbody th, table tbody td").wrapInner("<div></div>");});
```

还有其他想法吗？

标签： htmlcssangular

我有同样的问题，但这与 mat-table 无关。此解决方案高度特定于您页面的其余部分，但这对我有用。我有一个带有完美滚动条的 sidenav 组件，这导致高度受到限制。

我将此添加到master-layout.component.scss

@media print {
  .mat-drawer-content {
    height: auto !important;
  }
  .mat-drawer-container {
    overflow: inherit !important;
  }
  perfect-scrollbar {
    height: auto;
    max-height: none;
  }
  mat-sidenav-container {
    overflow: inherit !important;
  }
}

更有用的可能是我来到这里的方式。打开浏览器的 DevTools 并启用“模拟 CSS 媒体类型”，将其设置为“打印”。您现在可以检查您的页面，@media print标签将被启用。

现在检查元素并查看渲染的高度。它应该比你的窗口大。overflow: hidden如果不是，则必须由height: 100%或限制max-height: 100%。调整 CSS，使这些设置为自动或继承。向上移动元素，直到没有一个高度限制在窗口大小。

html - 角材料表打印视图

问题描述

解决方案

推荐阅读