window.print() CSS not loaded in print preview

Question

I need to provide option to print a part of the webpage. This was implemented using the javascript window.print() answered by: Bill Paetzke. The pop up window opens up (this contains CSS style) and the print dialog also opens. But the CSS style does not show up in the print. Tried @media =print but that also does not work. CSS style mainly consists of background color. One option that I got was to replace the background color with an image of 1px * 1px and repeat it. Is there any other way?

Browser: IE7 Code:

<html>
<head>
<style type="text/css" media="print,screen">
.hideMe{
display:block;
}

.PrintClass {
display:block;

}
.NoPrintClass{
display:block;
}
</style>
<script type="text/javascript"
    src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"> </script>
<script type="text/javascript">

    function PrintElem(elem)
    {
        Popup($('<div/>').append($(elem).clone()).html());
    }

    function Popup(data) 
    {

        var mywindow;       
        mywindow = window.open('', 'mydiv','height=400,width=600,scrollbars=yes','');            
        mywindow.document.write('<html><head><title>my div</title>');
        mywindow.document.write('<style type="text/css" media="print,screen">.hideMe{display:none;}.NoPrintClass{display:none;}</style>');               
        mywindow.document.write('</head><body>');
        mywindow.document.write('drop down selected value in parent: '+mywindow.opener.document.getElementById('testSelect').options[mywindow.opener.document.getElementById('testSelect').selectedIndex].text+'<br/>');
        mywindow.document.write('contentStarts<br/>');
        mywindow.document.write('  using jquery:  '+data);
        mywindow.document.write(' using javascript: '+mywindow.opener.document.getElementById('mydiv').innerHTML);
        mywindow.document.write('<br/>contentEnds'); 
        mywindow.document.write('<br/>');                                     
        mywindow.document.write('</body></html>');        
        mywindow.document.focus();
        mywindow.document.close();      
        mywindow.print();             
        return true;
    }

   </script>
</head>


<body>

This is not be printed<br/>
<div id="mydiv">This content is to be printed<br/>
<div class="hideMe"><select id="testSelect">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
</div>
<br/>
This will also be printed 
<br/>print  bgcolor
<div style="background:red;" class="PrintClass">print</div><br/>
<div style="background:green;" class="PrintClass">print</div><br/>
<div style="background:red;" class="NoPrintClass">not to print</div><br/>
<div style="background:green;" class="NoPrintClass">not to print</div><br/>
<div style="background:red;" class="PrintClass">print</div><br/>
<div style="background:green;" class="PrintClass">print</div><br/>
<br/> print image
<div style="background-image:url('red.png');background-repeat:repeat;" class="PrintClass">print</div><br/>
<div style="background-image:url('green.png');background-repeat:repeat;" class="PrintClass">print</div><br/>
<div style="background-image:url('red.png');background-repeat:repeat;" class="NoPrintClass">not to print</div><br/>
<div style="background-image:url('green.png');background-repeat:repeat;" class="NoPrintClass">not to print</div><br/>
<div style="background-image:url('red.png');background-repeat:repeat;" class="PrintClass">print</div><br/>
<div style="background-image:url('green.png');background-repeat:repeat;" class="PrintClass">print</div><br/>
<text>some text
<div style="position:relative;">
<img src="green.png" width="100px" height="100px" value="abcd">dfads
<div style="postion:absolute">wpeoriu</div>
</div>
</img>
</text>

</div>

<div>This will not be printed.</div>
<br/>
<div id="anotherdiv">Nor will this.</div>

<input type="button" value="Print Div" onclick="PrintElem('mydiv')" />



</body>

</html>

Any links to try and debug the code? – diego nunes May 03 '13 at 19:07 — diego nunes, May 03 '13 at 19:07

NullPointerException · Accepted Answer · 2013-05-03T19:38:48.847

12

Because you are writing document with the html without any styles ids That means it is only writing the content of div without div around it.

use this to get the whole div

 $('<div/>').append($(elem).clone()).html();

See this fiddle

Html

  <div id="mydiv">
    This will be printed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a quam at nibh adipiscing interdum. Nulla vitae accumsan ante. 
  </div>
    <div>
   This will not be printed.
  </div>

<div id="anotherdiv">
    Nor will this.
</div>

<input type="button" value="Print Div" onclick="PrintElem('#mydiv')" />

JavaScript

function PrintElem(elem)
{
      Popup($('<div/>').append($(elem).clone()).html());
}

function Popup(data) 
{
    var mywindow = window.open('', 'my div', 'height=400,width=600');
    mywindow.document.write('<html><head><title>my div</title>');
     mywindow.document.write('<link rel="stylesheet" href="http://www.dynamicdrive.com/ddincludes/mainstyle.css" type="text/css" />');
    mywindow.document.write('</head><body >');
    mywindow.document.write(data);
    mywindow.document.write('</body></html>');

    mywindow.print();
  //  mywindow.close();

    return true;
}

edited May 03 '13 at 19:38

answered May 03 '13 at 18:29

NullPointerException

3,732
5
28
62

Hi,thanks for the response. i just gave the link to show the method used. I do have style sheet in the doc and it reflects in the the pop up window. BTW, I even enabled the option under tools->internet options->advanced to have images included in print – Balaji Krishnan May 03 '13 at 18:47
Oh I got It. when you are writing the content , it is only writing the content of div with out id. wrap your content in another div and then print then. See the edited portion – NullPointerException May 03 '13 at 19:26
Found the jquery way get the whole div instead of content only, edited the answer – NullPointerException May 03 '13 at 19:39
Added the code. Neither background nor background-image reflects in the print. If img tag is used, then the image is seen in the print. I cant use this as i need text to be rendered above the image. Example: in the code posted, the 'print' and 'not to print' are above a 1px * 1px repeated image. – Balaji Krishnan May 04 '13 at 18:09

score 1 · Answer 2 · edited Jul 08 '13 at 17:01

1

I found this page helpful. Take a look.

Print & print preview with print css works great. I did it in opencart product page. Now I try to print it pdf format, if you have some clue, it would be great.

edited Jul 08 '13 at 17:01

rktcool

356
1
11

answered Jul 08 '13 at 16:32

MariaC

11
1

window.print() CSS not loaded in print preview

2 Answers2