I want to print a div from a web page when i press default print button's via keyboard. But i don't have any idea how to do.
I tried with
keypressbut it will print if i press any key from the keyboard, but i want to print if press the key pairctrl+p.
I try something like:
$(document).bind('keypress', 'ctrl+p', printContent);
function printContent(){
var restorepage = document.body.innerHTML;
var printcontent = document.getElementById("print_div").innerHTML;
document.body.innerHTML = printcontent;
window.print();
document.body.innerHTML = restorepage;
}
HTML
<h1>My Print page</h1>
<div id="print_div">
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
If any one give me the idea then it will be helpful for me.
Thanks in advance.
I want to print a div from a web page when i press default print button's via keyboard. But i don't have any idea how to do.
I tried with
keypressbut it will print if i press any key from the keyboard, but i want to print if press the key pairctrl+p.
I try something like:
$(document).bind('keypress', 'ctrl+p', printContent);
function printContent(){
var restorepage = document.body.innerHTML;
var printcontent = document.getElementById("print_div").innerHTML;
document.body.innerHTML = printcontent;
window.print();
document.body.innerHTML = restorepage;
}
HTML
<h1>My Print page</h1>
<div id="print_div">
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
If any one give me the idea then it will be helpful for me.
Thanks in advance.
Share Improve this question asked Mar 10, 2016 at 7:36 Murad HasanMurad Hasan 9,5832 gold badges22 silver badges43 bronze badges 5-
3
Why not use a CSS rule for print media that ensures everything except your desired div is
display: none? – eggyal Commented Mar 10, 2016 at 7:45 - I have no idea about it. If any reference then please provide. – Murad Hasan Commented Mar 10, 2016 at 7:47
-
@FrayneKonok developer.mozilla/en-US/docs/Web/CSS/@media Use
@media printthen make all non-required elementsdisplay: none. – Rory McCrossan Commented Mar 10, 2016 at 7:48 - @RoryMcCrossan, Is it cross browser supported or i need to do it manually? – Murad Hasan Commented Mar 10, 2016 at 7:49
-
2
The patibility chart is at the bottom of that page.
@media printis fully supported in everything, right back to IE6. – Rory McCrossan Commented Mar 10, 2016 at 7:50
2 Answers
Reset to default 4Use this code:
<html>
<head>
<script src="http://www.openjs./scripts/events/keyboard_shortcuts/shortcut.js"></script>
<script language="javascript" type="text/javascript">
shortcut.add("ctrl+p", function() {
var myDiv = document.getElementById("ID").innerHTML;
var oldPage = document.body.innerHTML;
document.body.innerHTML =
"<html><head><title></title></head><body>" +
myDiv + "</body>";
window.print();
document.body.innerHTML = oldPage;
});
</script>
</head>
<body>
<div id="ID">
print only this div
</div>
<div>
this will NOT be printed
</div>
</body>
</html>
As said in the ments, you should take a look at the @media print css tag.
You can hide any element you do not wan't to be printed when any user would do ctrl / cmd + P, and so spare them some ink and time.