There are many case which need the print out of the document that is being currently displayed.
We can print the document easily just by using a button and a little javascript code.
All you need is a html.
Then the div or the part of the page that you want to print. Assign the id or class to it on which the event will occur.
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
<title>Toggleable Search Form - Template Monster Demo</title>
<link rel="shortcut icon" href="http://static.tmimgcdn.com/img/favicon.ico">
<link rel="icon" href="http://static.tmimgcdn.com/img/favicon.ico">
<link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
<link rel="stylesheet" type="text/css" media="all" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<nav id="topbar">
<div class="searchlink" id="searchlink">
<button class="click">click me to print the div</button>
<div class="searchform">
<p>This is a print demo<br>
I hope you liked it and understood the functionality</p>
</div>
</div>
</nav>
<script type="text/javascript">
$(".click").click(function(){
var printa = $(".searchform").html();
alert(printa);
//return false;
a = window.open();
a.document.write('<html><body onload="window.print()">'+printa+'</body></html>')
a.document.close();
//printa.print();
})
</script>
</body>
</html>
In this the even will generate on the click of a button after which a new window will open and the content of the window will get printed.
If you want to print the whole window of yours and not the div you can simply give a button and on the click event of that you can give window.print();. It will not open the other window and will just print the window you are on at that current time.
0 Comment(s)