Tuesday, 1 October 2013

How to print part of rendered html page?

This can be done using CSS and JavaScript as well. See examples below.

Print part of the page using CSS

To do it using CSS you need to apply @media specific styles to page content which you want to print and non-printable stuff.

<html>
<head>
    <style type="text/css">

    #printable { display: none; }

    @media print
    {
     #non-printable { display: none; }
     #printable { display: block; }
    }
    </style>
</head>
<body>
    <div id="non-printable">
     Your normal page contents
    </div>

    <div id="printable">
     Printer version
    </div>
</body>
</html>

Print part of the page using JavaScript

To achieve the same functionality using JavaScript you need to use an iframe and set it's innerHTML based on what you want to print.
<html>
<head>
<title>Print Test Page</title>
<script>

function printDiv(divId) {
    window.frames["print_frame"].document.body.innerHTML=
       printDivCSS + document.getElementById(divId).innerHTML
    window.frames["print_frame"].window.focus()
    window.frames["print_frame"].window.print()
}
</script>
</head>
<body>
<b>Div 1:</b> <a href=javascript:printDiv('div1')>Print</a><br>
<div id=div1>This is the div1's print output</div>
<br><br>
<b>Div 2:</b> <a href=javascript:printDiv('div2')>Print</a><br>
<div id=div2>This is the div2's print output</div>
<br><br>
<iframe name=print_frame width=0 height=0 
frameborder=0 src=about:blank></iframe>
</body>
</html>

1 comment:

  1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a .Net developer learn from Dot Net Training in Chennai. or learn thru Dot Net Training in Chennai. Nowadays Dot Net has tons of job opportunities on various vertical industry.
    or Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry.

    ReplyDelete