How to Apply CSS to Print

How to apply css to print div

at last I found an answer. I don't know the reason why @media was not working correctly. So I used css styling in the print function itself.

w.document.write('<style>h1{font-size:20px;color:#76C04E;width:90%;}</style>');
w.document.write('<style>body{background: #FFFFFF; color: #000000; font: 85% arial, verdana, helvetica, sans-serif; }</style>');

w.document.write('<style>.res td{font-size: 12px;font-family: open sans, arial; border-top: 1px solid #ddd; width: auto;padding: 4px;} </style>');

Now the css is correctly taken in the print preview page.
But it works only in firefox.Will update the answer accordingly when I find the solution for chrome

Thanks.

How to only show certain parts with CSS for Print?

Start here. But basically what you are thinking is the correct approach.

Thanks, Now my question is actually
becoming: How do I apply CSS to a
class AND ALL OF ITS DESCENDANT
ELEMENTS? So that I can apply
"display:block" to whatever is in the
"printable" zones.

If an element is set to display:none; all its children will be hidden as well. But in any case. If you want a style to apply to all children of something else, you do the following:

.printable * {
   display: block;
}

That would apply the style to all children of the "printable" zone.

CSS is not applied for print

add your css in your js surely it will works. check here https://jsfiddle.net/Udhaytitus/ou054d27/3/

function printData(){   /*newWin= window.open("");   newWin.document.write('<html><style>@media print{body {color : #eee !important;font-size : 12em; padding:10px;}}</style><body onload="window.print()"><div>This is test print page.</div></body></html>');   newWin.print();   newWin.close();*/window.document.write('<html><style>@media print{body {color : #eee !important;font-size : 12em;border:1px solid #000; padding:77px;}}</style><body onload="window.print()"><div>This is test print page.</div></body></html>');   window.print();   window.close();  }
$('#btnPrint').on('click',function(){printData();})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><input type="button" value="print" id="btnPrint"/>

How to set css @media print styling with jquery

The way I solved it is as follows.

HTML

I changed the values to digits "1-2-3..." And added a class to each picture "a-b-c..."

<select id="background">
   <option class="a" value="1">Picture 1</option>
   <option class="b" value="2">Picture 2</option>
   <option class="c" value="3">Picture 3</option>
   <option class="d" value="4">Picture 4</option>
   <option class="e" value="5">Picture 5</option>
   <option class="f" value="6">Picture 6</option>
</select>

<div class=”results-area”>
...
</div>

<a id="printMe" class="btn btn-warning">Print</a>

CSS

With the @media print I specified for each class his own background-image

@media print {
   .a {
     background-image: url(image1.jpg) !important;
   }

   .b {
     background-image: url(image2.jpg) !important;
   }

   .c{
     background-image: url(image3.jpg) !important;
   }

   .d{
     background-image: url(image4.jpg) !important;
   }

   .e {
     background-image: url(image5.jpg) !important;
   }

   .f {
     background-image: url(image6.jpg) !important;
   }
}

JQuery

$('#background').change(function () {
    if ($(this).val() === "1") {
    $('.results-area').css("background-image", "url(image1.jpg)");
    replace();
    $('.results-area').addClass("a");
}
else if ($(this).val() === "2") {
    $('.results-area').css("background-image", "url(image2.jpg)");
    replace();
    $('.results-area').addClass("b");
}
else if ($(this).val() === "3") {
    $('.results-area').css("background-image", "url(image3.jpg)");
    replace();
    $('.results-area').addClass("c");
}
else if ($(this).val() === "4") {
    $('.results-area').css("background-image", "url(image4.jpg)");
    replace();
    $('.results-area').addClass("d");
}
else if ($(this).val() === "5") {
    $('.results-area').css("background-image", "url(image5.jpg)");
    replace();
    $('.results-area').addClass("e");
}
else if ($(this).val() === "6") {
    $('.results-area').css("background-image", "url(image6.jpg)");
    replace();
    $('.results-area').addClass("f");
}
else {
    replace();
}
});

function replace() {
    $('.results-area').removeClass("a b c d e f");
};

$('#printMe').click(function () {

        print()
});

It feels like a crazy way of doing it, but it did the job.

I hope this works for you too!

Print command in chrome doesn't apply css style

After 2 pathetic days, I couldn't crack up with a proper fix.But had few alternatives

Writing styles inline with the code worked Pretty perfectly. Code looks as below

<div style="border:0.5px #B1B1B1;border-style:solid;border-top-width:15px;width:1px;"></div>

Since the previous approach is not a great coding practice I was forced to create an image with the above dimensions and I added it as a part of the code.

Thanks to chrome.Atleast it adds images, if not css.

CSS in print area

So you are launching a new window which does not carry your defined CSS file with it. Instead, you can define a printable div and use the window.print() javascript method.

function printDiv(divName) {     var printContents = document.getElementById(divName).innerHTML;     var originalContents = document.body.innerHTML;
     document.body.innerHTML = printContents;
     window.print();
     document.body.innerHTML = originalContents;}

label { font-size: 20px; }@media print {  label {    font-size: 10px;  }}

<button type="button" onclick="printDiv('print-area')" class="btn btn-primary">Print Div</button><div id="print-area">  <form class="form-group">    <label for="test-label">Test</label>    <input />  </form></div>

How to Apply CSS to Print