admin管理员组

文章数量:1420310

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 keypress but it will print if i press any key from the keyboard, but i want to print if press the key pair ctrl+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 keypress but it will print if i press any key from the keyboard, but i want to print if press the key pair ctrl+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.

  • javascript
  • jquery
  • printing
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 print then make all non-required elements display: 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 print is fully supported in everything, right back to IE6. – Rory McCrossan Commented Mar 10, 2016 at 7:50
Add a ment  | 

2 Answers 2

Reset to default 4

Use 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.

本文标签： javascriptPrint a specific div from a page via pressing ctrlpStack Overflow

版权声明：本文标题：javascript - Print a specific div from a page via pressing ctrl+p - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745331307a2653823.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。