打印 css 样式不适用于 Angular 项目

Question

我正在尝试在我的 Angular 项目中使用 CSS 创建一个可打印的文档。 对于运行到多个页面的打印文档，我需要自动避免在标题中打印日期和标题。同时我想确保打印的文档有一些边距。为了实现这一点，我使用了 SO 上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的边距了。