CODEWITHSUNDEEP
htmlcssangulartypescript
Aymen TAGHLISSIA
Aymen TAGHLISSIA

Reputation: 1925

Using ngx-print, the background is always print in white

Actualy i'm using ngx-print npm library to print my div , it works fine , the only problem is that it's not displaying the background color as in the real one:

enter image description here

My HTML Code :

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

has anyone encountered this problem before ? , if yes what is the solution , Thanks.

Note: i tried also to print the div without using the library , using window.print() , and i have always the same problem.

Upvotes: 5

Views: 3369

Answers (2)

sabri03
sabri03

Reputation: 81

you can add -webkit-print-color-adjust:exact to print your background in real colors

Upvotes: 3

Aymen TAGHLISSIA
Aymen TAGHLISSIA

Reputation: 1925

The -webkit-print-color-adjust property is a non-standard extension that can be used to force the printing of images and colors used in the background for WebKit-based browsers.

By default , it is initialized to economy thats why the background is not printing in the real colors , to fix this , we will have to change its value to : exact , this solved the problem for google chrom.

The alternate of this CSS in firefox and IE is : color-adjust: exact | economy;.

Now it is working perfectly !

Upvotes: 2

Related Questions