css - 打印 css 样式不适用于 Angular 元素

Question

我正在尝试在我的 Angular 元素中使用 CSS 创建可打印文档。 对于涉及多页的打印文档，我需要自动避免在页眉中打印日期和标题。同时我想确保文档打印时留有一定的边距。为此，我使用了 this answer 中建议的方法。所以。但是我无法应用样式。

我的 CSS 代码是这样的

@media print {
  @page { 
    size: auto;
    margin: 0; 
  }
  body { 
    margin: 2cm !important;
  }
}

我尝试将此代码粘贴到 app.component.scss 文件和 styles.scss 文件中。这两种方法似乎都不起作用。有什么建议吗？

Answer 1

您需要将以下 css 放入您的 styles.css 文件中

@media print {
  @page { 
    size: auto;
    margin: 0mm; // added mm
  }
  body { 
    margin: 2cm;
  }
}

如果您需要特定于组件的样式，您也可以将其添加到组件的 css 文件中:

@media print {
  section {
    color: orange;
  }
}

这是一个Stackblitz example . 您也可以尝试打印此页面 ( https://angular-j4ab2g.stackblitz.io )，您会看到标题中的日期消失了，我的自定义部分有橙色文本。

编辑

我认为删除页脚和页眉的最佳选择是取消选中打印设置中的框

那么你不需要在@page 选择器上添加 0mm 边距，在 body 选择器上添加 2cm 边距。