How to Print a Particular Portion of a Webpage?

• Download demo - 3.9 KB

Introduction

Here I am going to demonstrate “how to print a particular portion of webpage?”. We use Window.Print() JavaScript in order to print data displayed on web-page. But there may be a case when I didn’t need to print the whole page or just required to print one small portion of page instead of the whole page, in those scenarios, Window.print() won’t work. So what should we do in such a situation? Here is the answer.

Inside the Code

We can print web document through JavaScript, so definitely we’ll write some JavaScript to print portion of web page. Here is the script:

function CallPrint(strid) {
    var prtContent = document.getElementById(strid);
    var WinPrint = window.open('', '', 'letf=0,top=0,width=1,height=1,
                    toolbar=0,scrollbars=0,status=0');
    WinPrint.document.write(prtContent.innerHTML);
    WinPrint.document.close();
    WinPrint.focus();
    WinPrint.print();
    WinPrint.close();
    prtContent.innerHTML = strOldOne;
}

Now, how to use this JavaScript? For that, create a <div /> element and assign unique id to it (i.e. <div ID=”divPrint”). Now put your HTML content between this <div />.

For example, if I want to print Item information which are displays on grid like:

<asp:DataGrid Id=”grdItem” runat="”server">
 <Columns>
          ……..
          ……..
 </Columns>
</asp:DataGrid>

Put this whole HTML content between <div/> tag. Now in the onClientClick event of button, call JavaScript function like:

OnClientClick=”CallPrint(‘divPrint’)”

This completes your printing.