Menu
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>
815
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;
}
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.
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
