I'm currently working on a task to print a content in a div. Currently I'm using this approach. This works okay if the div is smaller than the screen. My problem is, my div that I need to print (report) is twice or thrice the height of the normal screen.
When I hit control + P. I can only see is what only captured in the screen.
what about using a print query?
@media print {
.selector{
/*some css*/
}
}
You can use this and re-arrange the content of your div in the print process
Here is sample code sample and hope it will be help you. Feel free to comment if you need additional thing.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$("#btnPrint").live("click", function () {
var divContents = $("#dvContainer").html();
var printWindow = window.open('', '', 'height=400,width=800');
printWindow.document.write('<html><head><title>DIV Contents</title>');
printWindow.document.write('</head><body >');
printWindow.document.write(divContents);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.print();
});
</script>
</head>
<body>
<form id="form1">
<div id="dvContainer">
This content needs to be printed.
</div>
<input type="button" value="Print Div Contents" id="btnPrint" />
</form>
</body>
</html>
