Web Development: Printing a DIV tag using JavaScript

08 July, 2010 | | 3 comments |

Share |
A majority of times, web developers have to print an existing content on their web page. To be practical, you target the contents of a <div> tag. While a majority would choose to search for a string like ‘Printing a DIV tag in ASP.Net’ or ‘Printing a DIV tag in PHP’; the right search string should be ‘Printing a DIV tag using JavaScript’. This is because irrespective of the server side programming language used, using JavaScript would be the most apt solution. Following method will help you achieve the same using simple and effective JavaScript. You can get the LOC(lines of code) to negligible if you implement the same using jQuery.


Step 1:

The <div> tag to be printed should bear the id="DivToPrint". Following HTML snippet depicts the same with comments(do read them carefully). The Button is used to execute the ‘PrintResults()’ function on Mouse click.


  • <!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>
  •     <title>Example for Printing a DIV</title>
  •  
  •     <script src="PrintScript.js" type="text/javascript"></script>
  •  
  • </head>
  • <body>
  • <br />
  •  
  •     <!-- The contents of 'DivToPrint' will be printed. Avoid giving any styles to this <DIV>. -->
  •  
  •     <div id="DivToPrint">
  •         
  •         <!-- All content here onwards will be printed -->
  •         
  •         <div style="text-align:center; margin:50px; border:double 4px BLACK;">
  •             
  •             <br />
  •                 This is the Content which will be printed.
  •             <br /><br />
  •             
  •         </div>
  •         
  •         <!--  *************************************** -->
  •         
  •     </div>
  •  
  •     <button onclick="PrintResults()">Click to Print</button>
  •  
  • <br />
  • </body>
  • </html>


Step 2:

Import the JavaScript file which contains the ‘PrintResults()’ function. The Script contains code for printing the DIV tag which follows the following procedure:

  • Read the DIV tag with id="DivToPrint" and access its HTML content in a variable.
  • Create an additional DIV tag which will have your custom HTML content to be printed. Add the custom HTML content to this DIV tag.
    • Create a pop-up menu using ‘window.open()’. Open the document stream to this document and add the contents of both the DIV tags and close the stream. This Window when opened will open up the print window. On successful print operation, this window will terminate offering no user intervention with the window. You can remove the ‘window.close();’ code if you want this window to persist.

    Following is the JavaScript code with detailed annotations as present in PrintScript.js


    •  
    • /* JavaScript function to print the contents of the DIV */
    •  
    • function PrintResults()
    • {
    •          
    •     //alert("Function Entered!");   /* Test if the function is entered */
    •     
    •     /* We can create a DIV with custom content dynamically to be printed. */
    •     
    •     var elem = document.createElement("div");
    •     elem.innerHTML = "<div style='text-align:left;'>"
    •                         + "<br />This is the custom CONTENT.<br /><br />"
    •                     + "</div>"
    •                     + "<br /><br />";
    •     
    •     var content1 = elem.innerHTML;      // content1 has to HTML code for our Custom DIV
    •     var content2 = document.getElementById("DivToPrint").innerHTML; // content2 has to HTML code for our 'DivToPrint'
    •     
    •     var win1 = window.open("", "Print_Results", "scrollbars=yes,width=800,height=700,toolbar=no,resizable=true,status=false,location=false");
    •     
    •     //win1.moveTo(150, 100);        /* Use this to move the Window to a specified location  */
    •     
    •     //alert(content1 + content2);   /* Will show the entire HTML CODE to be printed in alert Window for Test */
    •     
    •     //Open the stream to the win1 for adding the CODE
    •     
    •     win1.document.open();
    •     
    •     win1.document.write("<html>"
    •                         + "<head><title>Window to be Printed</title></head>"
    •                         + "<body onload='window.print();window.close();'>"
    •                             + content1 + content2 +
    •                         "</body></html>");
    •     
    •     /* You can remove 'window.close();' to avoid closing the Window if you want. */
    •     
    •     win1.document.close(); //Closing the stream is mandatory
    •     
    • }






    You can download the source code Here:





    Source code for printing a DIV tag using JavaScript






    3 comments:

    Postcard Printing said...

    Thanks to say for posting this blog. We have to get new collection of news from your end. All the best for you best support. Keep updataing your blog. This is really nice job

    printingbanneramerica said...
    This comment has been removed by a blog administrator.
    Mitiss said...

    Great Code! Great script! Thanks!