css - 如何在 Angular 7 应用程序中使用打印样式

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;
   }
}