Wednesday, 30 January 2013

Printing DIV tag using JavaScript



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

       <head>
              <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
              <title>Printing DIV Tag Example</title>
              <script type="text/javascript">
                  function PrintResults() {
                      var elem = document.createElement("div");
                      elem.innerHTML = "<br />";

                      var content1 = elem.innerHTML;
                      var content2 = document.getElementById("DivToPrint").innerHTML;

                      var win1 = window.open("", "Print_Results", "scrollbars=yes,width=800,height=700,toolbar=no,resizable=true,status=false,location=false");

                      win1.document.open();

                      win1.document.write("<html>"
                                             + "<head><title>Header</title></head>"
                                             + "<body onload='window.print();window.close();'>"
                                          + content1 + content2 +
                                             "</body></html>");

                      win1.document.close();
                  }
              </script>
       </head>

       <body>
                     <div>
                           This is non printing zone....<br />
                           <br />
                     </div>
                     <div id="DivToPrint">
                           <br />
                           This is printing zone...<br />
                           This is printing zone...<br />          
                           This is printing zone...<br />
                           This is printing zone...<br />
                           This is printing zone...<br />
                           This is printing zone...<br />
                     </div>
                     <button onclick="PrintResults()">Print</button>
       </body>

</html>

2 comments: