При использовании ngx-print фон всегда печатается белым

Question

На самом деле я использую библиотеку ngx-print npm для печати моих div, она работает нормально, единственная проблема в том, что она не отображает цвет фона, как в реальном:

Мой HTML Код:

<div class="hover-div">
    <button mat-button class="title-div" printSectionId="card-container" 
         printTitle="professionalcard" [useExistingCss]="true" ngxPrint>
            <div fxLayout="row">
                <mat-icon class="preview-icon">print</mat-icon>
                <div>print</div>
            </div>
     </button>
</div>

Кто-нибудь сталкивался с этой проблемой раньше? , если да, в чем решение, спасибо.

Примечание: Я также пытался напечатать div без использования библиотеки, используя window.print(), и у меня всегда была одна и та же проблема .

Answer 1

Свойство -webkit-print-color-adjust является нестандартным расширением, которое можно использовать для принудительной печати изображений и цветов, используемых в качестве фона для браузеров на основе WebKit.

По умолчанию оно инициализируется как economy вот почему фон не печатается в реальных цветах, чтобы исправить это, нам придется изменить его значение на: exact, это решило проблему с Google Chrom.

Альтернатива этому CSS in firefox и IE is: color-adjust: exact | economy;.

Теперь все работает отлично!

Answer 2

Вы можете добавить -webkit-print-color-adjust:exact, чтобы напечатать фон в реальных цветах