Print a particular portion of a webpage in asp.net

Here I am going to demonstrate “how to print 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 whole page or just required to print one small portion of page instead of whole page, in those scenario Window.print() won’t work. So what should we do in such 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 all makes your printing done.

Download the demo project here