When designing the web page, we need to consider providing print functionality within our page. Because some of the users still prefer to save the hardcopy even though they can get softcopy of exact information. So, How to print the web page? That can be done by sending print request through JavaScript. There is javascript built-in function to print the whole webpage. Just simply use window.print(); function. Let's see the some example.

Print Whole Page

 // This code will print whenever page was loaded. Put it in anywhere within body tags.
 <script type="text/javascript">window.print();</script>
 // This code will print whenever user click the link.
 <a href= "javascript:window.print();">Print</a>
 // This code will print whenever user click the button.
 <input type="button" value="Print" onclick="window.print();"/>

Print HTML Partially

Unfortunately, in the real world projects, user requirement is not that much simple. I am sure to say that your client will request you to be able to print just the part of the page rather than printing the whole page. So, How to print the html? How to print the specific part of the page? Here is the code. Let's suppose we want to print only the contents of this div. The basic idea of this style is simple. Just create the new html page on the fly and print it.

function print_this(container){

var html = document.getElementById(container).innerHTML;
var popup_win = "toolbar=yes,location=no,directories=yes,menubar=yes,scrollbars=yes,width=600,height=600,left=100,top=100";
var print_form = window.open('','',popup_win);
html = '<html><head><title>Print Preview</title></head><body>' + html + '</body></html>';
return false;


<input type="button" value="Print" onclick="print_this('divToPrint');" />

Title of divToPrint

Content of divToPrint.

Link of divToPrint

Print Specific Elements Within a HTML Page

Sometimes, we have to find the solution for special requirement. For example, some elements in page have to show when viewing in screen but exclude that when printing. It can be done by using css and javascript together.
<style type="text/css">
@media print 
    .DoNotPrint{ display:none; }
    .DoPrint{ display:div; }               
Then, assign it to class property of the correspondent element to specify whether you want it to be included when printing or not.
<div id="div1" class="DoNotPrint">This will not be included when printing</div>
<div id="div2" class="DoPrint">This will be included when printing</div>
Please take a look the sample page here and do not forget to view the page source.
I hope you get some ideas about how to print html. Thank for reading my articles and have fun coding.

Categories : Web Development, CSS
Tags : css, print, html

author's photo

Author : Blue Cloud

Just a normal software developer who love to write code. Developing professional software since 1999. After working in the software industry for many years, I've started my own website to share knowledges and experiences.

blog comments powered by Disqus