Window.print() Print All Div Content Without Scrollbar
i want to print web page with javascript function window.print() the page include div with scroll bar But printing is displayed only part of the div I tried to add to css @media
Solution 1:
This method will let you print any arbitrary div.
Using jQuery:
functionprint(selector) {
var$print = $(selector)
.clone()
.addClass('print')
.prependTo('body');
//window.print() stops JS execution
window.print();
//Remove div once printed$print.remove();
}
And some CSS:
body, html {
width: 100%;
height: 100%;
}
.print {
position: fixed;
overflow: auto;
width: 100%;
height: 100%;
z-index: 100000; /* CSS doesn't support infinity *//* Any other Print Properties */
}
Solution 2:
try this
Note:dont give inline style to div
<head><styletype="text/css">.result{ height:200px;overflow:auto;}
</style><styletype="text/css"media="print">@media print{ .result{ height:100%;overflow:visible;} }
</style><title></title></head><body><divclass="result">
content goes here..
</div><form><inputtype="button"value="print"onclick="window.print();" /></form></body>Solution 3:
This is code to print div content using javascript.
<scriptlanguage="javascript"type="text/javascript">functionprintDiv(divID) {
//Get the HTML of divvar divElements = document.getElementById(divID).innerHTML;
//Get the HTML of whole pagevar oldPage = document.body.innerHTML;
//Reset the page's HTML with div's HTML onlydocument.body.innerHTML =
"<html><head><title></title></head><body>" +
divElements + "</body>";
//Print Pagewindow.print();
//Restore orignal HTMLdocument.body.innerHTML = oldPage;
}
</script><divid="printme"style="width: 100%; background-color: Blue; height: 200px">
Print me I am in 1st Div
</div><inputtype="button"value="Print"onclick="javascript:printDiv('printme')" />
Post a Comment for "Window.print() Print All Div Content Without Scrollbar"