如何在Angular 7 App中使用打印样式

Question

我需要以最小的边距打印html表单（在Angular7应用程序内）。到目前为止，我能实现的唯一方法是使用Chrome并通过打印预览框手动调整边距。

我尝试在组件css文件和主要的全局样式表中添加@media打印样式和@page样式。我什至尝试将html和body标签的背景颜色更改为绿色，以查看是否正在发生任何事情。我已将Chrome中的呈现方式更改为打印样式，以便可以看到CSS的影响，但仍然看不到任何影响

尝试了component.css和styles.css

@page {
    size: auto;
    margin: 0;
}

html, body {
    margin: 0;
    background: green;
}

@media print{
    html, body {
        margin: 0;
        background: green;
    }
}

背景绿色只是为了让我知道它是否有效。我会在工作时将其删除。

当我在屏幕上呈现打印样式（或在打印预览窗口中）时，我希望html和body标签的背景变为绿色

我的html或body标签没有绿色变化，页边距保持默认值。

Answer 1

尝试为每个规则使用“！important”吗？

@page {
   size: auto !important;
   margin: 0 !important;
}

@media print{
 html, body {
   margin: 0 !important;
      background: green !important;
   }
}