Print a Part of Page using Javascript

do you want to print a part of the web page?

do you have multiple print buttons in a web page, which prints portion of the page?

do you want to exclude some elements in print of your page? (like images, ads)

do you want to print the display page differently? (changing font or colors of text)

Here, I am going to give code examples to above questions

Let us take a sample HTML web page

if you want to print the whole page then

To Print a part of the web page:
– create a print window and write html text you wanted to print
– focus the window and call the “print()” function
– close the print window

Here is the modified printPage function

function printPage(id)
{
var html=”“;
html+= document.getElementById(id).innerHTML;
html+=”“;

var printWin = window.open(”,”,’left=0,top=0,width=1,height=1,toolbar=0,scrollbars=0,status =0′);
printWin.document.write(html);
printWin.document.close();
printWin.focus();
printWin.print();
printWin.close();
}
You can hide some of the elements within your actual content by adding style elements or include css file in print window html

—–

—-
function printPage(id)
{
var html=”“;
html+=”“;
html+=”

“;
html+=”“;
html+=”“;
html+= document.getElementById(id).innerHTML;
html+=”“;
…..
}
In the above example, I have added style and css file, you can use either one or both. Using these styles or css, we can style the text only for print.

If you have multiple print buttons, and each one prints selected area of a web page, then you need to pass id of the print area on each button click.