Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Print the html using a print button

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 238
    Comment on it

    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)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: