I need to print the contents between two div tags. The printing is done fine, but somehow if the user checks the "Background Graphics" checkbox in the printing pop up then the background becomes blue which is the actual background color of the web page. Is it possible to force the user to print only in black and white or disable the "Background Graphics" checkbox from the pint pop up? Below is the image of the "Background Graphics" check box that I am talking about:
below is my code to do the 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 also tried putting this in the page:
<style>
article {
-webkit-print-color-adjust: exact;
background: #222;
color: #eee;
}
</style>
Below is my div tag:
<div>
The contents needs to be printed. This is just a test.
</div>
Use grayscale filter on @media print:
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%);
Like this:
@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'll force it: