Angular Material 表格打印视图样式错乱问题如何解决

问题原因 #

Angular Material Table默认基于Flex布局实现，浏览器打印模块对Flex布局的兼容性较差，且打印场景下默认会重置部分样式，叠加代码中响应式类、内联动态样式未适配打印介质，就会出现样式错乱问题。
你遇到的异常效果如下：

解决方案 #

1. 新增打印专属媒体查询样式

在全局样式文件或者组件样式文件中添加以下打印样式，强制mat-table切换为原生表格布局，屏蔽不需要打印的元素：

@media print {
  /* 强制mat-table使用原生表格布局，覆盖默认flex布局 */
  .mat-table {
    display: table !important;
    width: 100% !important;
  }
  .mat-header-row, .mat-row {
    display: table-row !important;
    /* 避免行内容被分页截断 */
    page-break-inside: avoid;
  }
  .mat-header-cell, .mat-cell {
    display: table-cell !important;
    flex: none !important;
    width: auto !important;
    padding: 8px 12px !important;
    word-wrap: break-word;
  }
  /* 隐藏不需要打印的元素：操作按钮、移动端专属内容、屏幕专属阴影等 */
  .btn-icon-only, .hide-desktop, .mat-elevation-z8 {
    display: none !important;
  }
  /* 表头固定在每一页顶部 */
  .mat-header-row {
    display: table-header-group !important;
  }
}

2. 修复代码语法错误

现有代码中存在指令写错的问题，会干扰组件正常渲染：
原代码：

<mat-footer-cell *renderColumnmatFooterCellDef> </mat-footer-cell>

修正为：

<mat-footer-cell *matFooterCellDef> </mat-footer-cell>

3. 可选优化

如果使用的是局部打印逻辑，建议单独将表格内容抽离到独立的打印DOM容器中，避免页面其他全局样式对打印效果产生干扰。

内容的提问来源于stack exchange，提问作者Karan