html - culoarea de fundal dispare la imprimare folosind window.print()


Încerc să imprim o pagină în Angular, folosind window.print();, totul funcționează bine, tot celălalt CSS funcționează bine, singura problemă este că culoarea de fundal nu se afișează în documentele tipărite. Am atașat un exemplu StackBlitz, deci: a mai întâlnit cineva această problemă înainte? Dacă da, care este soluția? Mulțumesc.

Exemple StackBlitz de aici

Notă : Am făcut multe cercetări pe Stackoverflow și alte forumuri, și nimeni nu vorbește despre această problemă.

Fișier HTML imprimabil :

<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-ul paginii :

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

Rezultat :

Răspuns #1

Adăugarea -webkit-print-color-adjust: exact; în pagina CSS a rezolvat problema în Chrome, iar color-adjust: exact; a rezolvat problema în Mozilla Firefox!