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: |  |
3 comments:
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
Great Code! Great script! Thanks!
Post a Comment