html - 使用 window.print() 打印时背景颜色消失

Question

我正在尝试使用 angulat 打印页面window.print();，一切正常，所有其他 css 工作正常，唯一的问题是背景颜色未显示在可打印文档中，我附上了 StackBlitz 示例，所以：有以前有人遇到过这个问题吗？，如果是，有什么解决办法，谢谢。

StackBlitz 示例从这里

注意：我在stackoverflow和其他论坛上做了很多研究，没有人谈论这个问题。

可打印文件 HTML：

<div class="page-container">
<div class="title-container">Invoice Title</div>
<div class="body-container">
  This is what I'm going to print, everything works fine , but the background color never changes , no matter what i add to css file
</div>
</div>

页面的CSS：

.page-container{
  width: 100%;
  background-color : rgb(216, 23, 23);  // as you can see , background not working 
}
.title-container{
  font-size: 24px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-bottom: 20px;
  border: 2px blueviolet solid;
  color: rgb(228, 0, 228);
  background-color : rgb(221, 0, 0) !important;// not working also
}
.body-container{
  background : #000; // not working 
}

结果 ：

标签： htmlcssangulartypescript

Answer 1

添加-webkit-print-color-adjust: exact;到 css 页面解决了 chrom 中的问题，并color-adjust: exact;解决了 mozilla firefox 中的问题！