With the ngx-print tool, the printing background is consistently set to white

Currently, I am utilizing the ngx-print npm library for printing my div. It functions properly but the issue lies in it not displaying the background color accurately:

https://i.sstatic.net/Yq0aZ.jpg

This is 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 anybody faced this particular issue before? If so, what was your solution? Thank you.

Note: I have also attempted to print the div without using the library, by employing window.print(), but encountered the same problem consistently.

htmlcssangulartypescript

Answer №1

For an accurate representation of background colors when printing, include -webkit-print-color-adjust:exact

Answer №2

The -webkit-print-color-adjust property is an unconventional addition that allows for the proper printing of images and background colors in WebKit-based browsers.

Typically set to economy by default, resulting in inaccurate color representation during printing, changing it to exact rectifies this issue, ensuring accurate output for Google Chrome users.

In Firefox and IE, a similar CSS alternative is available using: color-adjust: exact | economy;.

With this adjustment, printing now functions flawlessly!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to delete spaces between span elements while preserving the spaces within each individual span tag?

Is there a way to eliminate unexpected spaces that appear between spans? One attempt was made by setting font-size: 0 within the wrapper <div>, which successfully removed spaces not only between <span> tags but also within each <span> ta ...

htmlcssvue.jsvuejs2

Difficulty encountered when attempting to utilize keyup functionality on input-groups that are added dynamically

I've exhausted all available questions on this topic and attempted every solution, but my keyup function remains unresponsive. $(document).ready(function() { $(document).on('keyup', '.pollOption', function() { var empty = ...

javascriptjqueryhtml

Tips for invoking a function from a different component in Angular?

I'm currently working on implementing a method call from one Angular component to another Inside one.component.ts, there is a task to verify if it's a day off export class CalendarComponent implements OnInit { isDayOfWeekDisabled(dayOf ...

angulartypescriptangular6

Tips for invoking a function to automatically load elements on a jQuery mobile website

I am looking to keep my navbar HTML markup in a centralized location for easy editing. Currently, the body content of my index.html file appears like this: <div data-role="page" id="SomePage"> <div data-role="header"> <h1>Thi ...

javascriptjqueryhtmlcssjquery-mobile

Check if the browser is not Google Chrome before running the code in JavaScript

Related Search: Finding a secure way to detect Google Chrome using Javascript? Using Javascript to identify Google Chrome and apply CSS changes Is there a JavaScript statement that can be used to execute code only when the user is not using Google ...

javascriptjqueryhtmlcssgoogle-chrome

Angular2 routing directs me to a different URL path

In my Angular2 web application, I have set up the following routes: '', '/app', '/login', '/signin', '/validate', '/error', '**': I've defined a route configuration in app.router.t ...

angulartypescript

Protecting AWS Cognito User Pool and Client ID in a static webpage

According to the documentation from AWS (User Pool App Settings): Developers are responsible for securing app client IDs and secrets to ensure only authorized client apps have access to unauthenticated APIs. Is there a method to authenticate in a secur ...

angularamazon-web-servicessecurityamazon-cognito

What is the solution for resolving the error message, "The type 'string | boolean' cannot be assigned to type 'never'. The type 'string' cannot be assigned to type 'never' "?

interface DataStructure { name: string; url: string; date: string; popular: boolean; } const itemData: DataStructure = { name: "Item 1", url: "item-1", date: "2012", popular: true, }; function getItemByURL(keys: Array<k ...

typescript

The button works properly in JSFiddle, however, it is not able to clear the ordered list in the

DEMO Creating a script that captures mouse click coordinates and appends them to a list. The functionality works, except for an issue with the clear button not working properly. After making corrections in jsfiddle, the script functions correctly. Howeve ...

javascriptjqueryhtmlbuttonjsfiddle

How to retrieve values from checkboxes generated dynamically in php using jquery

This is a unique question and not related to event binding or any suggested duplicates. Hello, I am facing an issue while trying to fetch the value of a checkbox to send it in an ajax request to a PHP page. The checkboxes are dynamically created using PHP ...

javascriptphpjqueryhtmlcheckbox

Ways to incorporate radio buttons, checkboxes, and select fields into a multi-step form using JavaScript

In the snippet below, I have created a multi-step form where users can provide details. The issue is that currently only text input fields are being accepted. The array of questions specifies the type of input required for each question: Question no.1 req ...

javascripthtmljquerycss

Difficulty with navigation on Chrome for Android (also impacting Bootstrap's website and all other sites utilizing Bootstrap design)

While working on creating a responsive website using Bootstrap, I encountered an unusual issue with navigation specifically in Chrome on Android. After some investigation, I found that the same problem exists on Bootstrap's own website. To see the i ...

jqueryhtmlcssgoogle-chrometwitter-bootstrap

How can you update state with useState in React and perform additional actions in an onChange event?

I'm facing an issue with a component that includes another component (from headlessui/react) defined like this: export default function MyComponent(props) { const [selectedState, setState] = useState(''); return ( <div> & ...

reactjstypescriptreact-hooksnext.jsuse-state

Creating aesthetically pleasing and flexible rows with left-floated div elements of varying heights

I need to arrange a series of elements in rows that look like tables, with fixed width but variable height determined by the content. Each element is set to float left and have the same width value. The issue I'm facing is that sometimes the elements ...

htmljquerycsscss-float

Modifying CSS content attribute in real-time

A colleague of mine has rented a webshop from a company. They have the option to select different templates and are also able to customize the CSS and add Javascript snippets. They reached out to me for help with making some modifications, but there's ...

javascriptjqueryhtmlcss

How can you conceal nested elements within a layout that adjusts to various screen sizes or is percentage-based

Contemplate this HTML: <body> <div id="parent"> <div id="child"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus sapien congue, fringilla justo quis, aliquam tellus. Maecenas semper consectetur metus ege ...

htmlcssoverflow

What is the best way to retrieve text that is viewable to the user when there is a text overflow situation

When using ellipsis in a text input to indicate overflow, is there a way to determine what text is visible to the user versus hidden behind the ellipsis? Thank you for any help! https://i.stack.imgur.com/8iLBQ.png In my scenario, I need to display a list ...

htmljquerycssweb

Develop a game timer using CreateJS

Looking for advice on the most effective method to create a timer clock using Createjs. I've attempted to reference HTML elements with DOMElement in the past, but encountered difficulties. Essentially, I need to display a timer within a container so p ...

javascripthtmlcordovaeaseljscreatejs

What is causing the lack of redirection with this particular "res.redirect()" function?

How can I successfully implement a redirection in a Node.js and Express.js application? When I attempt to redirect by clicking a button, only the URL changes without any further action taking place. Using a form with a button inside, the form specifies a ...

htmlnode.jsexpress

What is the process for incorporating the !important declaration into a CSS-in-JS (JSS) class attribute?

I'm currently exploring the use of CSS-in-JS classes from this specific response in conjunction with a Material UI component within my React project. In order to override the CSS set by Bootstrap, I've decided to utilize the !important modifier. ...

javascripthtmlcssreactjsmaterial-ui