mandating monochrome printing

Is there a way to prevent the background color of a web page from being included in printouts when a user selects the "Background Graphics" checkbox in the printing pop up? I want the printed content to display only in black and white. Alternatively, can the option to include background graphics be disabled altogether?

https://i.sstatic.net/XoFGI.png

Here is the code snippet I am using for printing:

<script>

        function printContent(el) {
               var restorepage = $('body').html();
               document.getElementById('<%=lblDateTime.ClientID %>').style.display = "block";
               document.getElementById('<%=lblDateTime.ClientID %>').innerHTML = new Date().toLocaleString();
       
               document.getElementById('<%=acrLogo.ClientID %>').style.display = "block";
               document.getElementById('<%=compName.ClientID %>').style.display = "block";
               var printcontent = $('#' + el).clone();
               printcontent.removeAttr('style');
                $('body').empty().html(printcontent);
                window.print();
                $('body').html(restorepage);
            }

</script>

I have also tried adding this style to the page:

 <style>
article {
  -webkit-print-color-adjust: exact;
  background: #222;
  color: #eee;
}

</style>

Below is the div tag containing the content to be printed:

<div>
 The contents needs to be printed. This is just a test.
</div>

Answer №1

Apply a grayscale filter for printing using @media:

-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%);

Here is an example:

@media print {
      body {
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        filter: grayscale(100%);
      }
    }
Print this!
<span style="color:red;">Red text</span> 
<button onclick="window.print()">Print</button>

It will enforce the grayscale filter when printing:

https://i.sstatic.net/81oeI.png

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

Utilizing the current state within a React callback function closure: A guide to maximising efficiency

I'm currently working on a web page that features a dynamic list of form inputs. Users have the ability to add or remove input fields using designated buttons. To manage this functionality, I've created a parent object called <Ingredients /> ...

Evaluating operational Angular component - Error: $(...).somename function is not defined

I've encountered an issue while attempting to test my component in Angular. The component itself functions correctly during regular use, but when I try to run the tests using "yarn run test", I receive the following error message: HeadlessChrome 0.0. ...

Is the check for 'is integer' satisfactory?

Is the following 'is integer' function sufficient: function isInteger( input ) { return Number(input) === parseInt(input); } I want this function to return true for inputs like 12, 13, '14', '-1', Number.MAX_VALUE (round ...

Navigational sliders linking to bullet points

I'm attempting to create a slider with bullets that are interconnected by lines. These lines should change color when the corresponding bullet is clicked. My question is, how can I prevent the next bullets from being clickable if the previous one is c ...

What is the best way to determine which CSS class is shown when the page is loaded using JQuery?

I am facing a dilemma with displaying my site logo. I have both an image version and a text version, and I want to choose which one to display based on the vertical position on the page and the screen width. <a class="navbar-brand" id="top-logo" href=" ...

Is there a way to transform an HTML table from a horizontal layout to a vertical

I have reorganized the bus seating layout horizontally using a table. However, I now need to transform it vertically for mobile phones without disrupting my existing code. My attempt at using transform(rotate90deg) achieved the desired result, but the tab ...

Utilizing VueJS to choose an item from a list and exhibit it using a function

My goal is to retrieve the element I click on, displayed in a list, and then print this element using a method within my Vue instance through the mail-list tag in index.html. I have a Vue component that iterates over a JSON object and only displays two at ...

Executing a function with a click, then undoing it with a second click

My goal is to trigger an animation that involves text sliding off the screen only when the burger icon is clicked, rather than loading immediately upon refreshing the page. The desired behavior includes activating the function on the initial click and then ...

How can I anchor a div Banner saying "Get 50% off our products" to the Navbar directly above it?

Bootstrap Question: How can I attach the div Banner ("50% off of our products") to the Navbar directly above it? The structure looks like this: <Navbar> </Navbar> <div> <span>Discount: 50% off of our products </span </di ...

Leaving the pipeline of route-specific middleware in Express/Node.js

My implementation involves a sequence of "route specific middleware" for this particular route: var express = require('express'); var server = express(); var mw1 = function(req, resp, next) { //perform actions if (suc ...

Updating the icon image for navigation in AngularJS

I am looking to update an image upon navigating to /tab1. This can be achieved using 'ng-click' with AngularJS routing. Sample HTML snippet: <div class = "body" ng-controller = "app"> <div class = "column1"> <div cla ...

The transparency feature using rgba is not supported in the Chrome browser for Android

Have you noticed the transparency effect in certain divs using the rgba CSS property? Strangely, Chrome on my ASUS tablet and Samsung S3 mini Galaxy smartphone does not seem to support this feature. Surprisingly, Internet Explorer does! Any insights on w ...

Preventing page navigation in JavaScript: Why it's so challenging

I am encountering an issue with a link element that I have bound a click event to (specifically, all links of a certain class). Below is an example of the link element in question: <a id="2" class="paginationclick" style="cursor: pointer;" href=""> ...

The method Object.keys.map does not return the initial keys as they were in the original object

I'm retrieving an object from my database and it looks like this: {availability: null bio: null category: "" createdAt: "2020-10-13T13:47:29.495Z" email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfem ...

Utilizing ReactJS to display a new screen post-login using a form, extracting information from Express JSON

I am facing a challenge with updating the page on my SPA application after a successful login. I have successfully sent the form data to the API using a proxy, but now the API responds with a user_ID in JSON format. However, I'm struggling with making ...

Using the HTTP DELETE method in Node.js

Is there a specific configuration required before sending DELETE requests to a node.js application? I am able to send GET, POST, and PUT requests successfully, but for some reason DELETE requests are not functioning. When I try DELETE http://localhost:80 ...

Tips for updating the chosen value with jquery or javascript

I am facing a situation where I need to change the selected option in a dropdown menu using a function triggered onClick later in the application. <select id="myselect"> <option value=aa>aa</option> <option value=bb>bb</option&g ...

Passing boolean values to component attributes in Vue.js

I am attempting to create a straightforward input component using Vue, where if the condition IsPassword is true, the type will be set to "password," and if it is false, the type will be set to "text." I suspect there may be a syntax error causing a pars ...

How to interact with dropdown menu using Rselenium

Greetings, I am currently attempting to utilize Rselenium in order to interact with a dropdown menu. Specifically, the item I wish to click on within the dropdown menu is labeled Date Range. Upon inspecting the html code (refer to the image below), I iden ...

What are the steps for activating a textbox in a specific row?

I am attempting to activate a textbox by clicking on the corresponding button, but whenever I click any button, it always activates the first textbox. I prefer not to use 'id' in this scenario. <%@page contentType="text/html" pageEncoding="UT ...