window.print() CSS not loaded in print preview

javascript css internet-explorer printing

95,024

Solution 1

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;
}

Solution 2

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.

95,024

Balaji Krishnan

Updated on January 13, 2020

Comments

Balaji Krishnan over 4 years

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>

diego nunes about 11 years

Any links to try and debug the code?

Balaji Krishnan about 11 years

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
NullPointerException about 11 years

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 about 11 years

Found the jquery way get the whole div instead of content only, edited the answer
Balaji Krishnan about 11 years

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.