Firefox打印/保存页面时mat-divider不显示的解决方法咨询

这个问题源于Firefox打印渲染引擎对mat-divider默认CSS属性的处理差异——组件默认依赖的伪元素或border样式在打印模式下被Firefox忽略，即便添加常规@media print规则也可能被组件内置样式覆盖。

可行解决方案：强制自定义打印样式 #

在全局样式文件（如styles.scss）中添加以下打印媒体查询规则，直接覆盖mat-divider的默认样式，确保Firefox打印时能正确渲染：

@media print {
  mat-divider {
    display: block !important;
    border-top: 1px solid rgba(0, 0, 0, 0.12) !important;
    height: 0 !important;
    margin: 16px 0 !important;

    // 适配垂直分割线场景
    &[vertical] {
      border-left: 1px solid rgba(0, 0, 0, 0.12) !important;
      border-top: none !important;
      width: 0 !important;
      height: auto !important;
      margin: 0 16px !important;
    }
  }
}

如果需要在组件级别生效（不影响全局），可以使用::ng-deep（Angular 12+需注意，官方虽不推荐但临时可用）：

::ng-deep @media print {
  mat-divider {
    display: block !important;
    border-top: 1px solid rgba(0, 0, 0, 0.12) !important;
    height: 0 !important;
    margin: 16px 0 !important;
  }
}

原理说明 #

mat-divider默认通过伪元素或轻量级border属性绘制线条，Firefox打印模式下对这类间接样式的渲染优先级较低。通过明确设置border属性并强制display: block，可以绕过Firefox的打印样式优化逻辑，确保分割线在预览和输出中可见。

另外，用户也可以手动关闭Firefox打印预览中的「简化页面」选项，但这属于用户操作层面的临时方案，不如全局样式修改可靠。

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