Saturday, August 4, 2012

Printing just the web part and not the entire SharePoint page

I observed many times infopath webbased form not print full form contents. it's only print Firstpage of the form remaining pages print blank e.g if my webbased form has 4 pages if i print this form browser based file\print\ button, it print only first page remaining 2,3,4, pages print blank but here it print header and footer, but i does not print full webpart contents.

so i decided to work on this topic
Insert a Content Editor Web Part and edit the source code. Add the following to it:

<input type="button" OnClick="javascript:void(PrintWebPart())" value="Print Web Part">
<script language="JavaScript">
//Controls which Web Part or zone to print
var WebPartElementID = "<WebPartElementID>";

//Function to print Web Part
function PrintWebPart()
{
var bolWebPartFound = false;
if (document.getElementById != null)
{
//Create html to print in new window
var PrintingHTML = '<HTML>\n<HEAD>\n';
//Take data from Head Tag
if (document.getElementsByTagName != null)
{
var HeadData= document.getElementsByTagName("HEAD");
if (HeadData.length > 0)
PrintingHTML += HeadData[0].innerHTML;
}
PrintingHTML += '\n</HEAD>\n<BODY>\n';
var WebPartData = document.getElementById(WebPartElementID);
if (WebPartData != null)
{
PrintingHTML += WebPartData.innerHTML;
bolWebPartFound = true;
}
else
{
bolWebPartFound = false;
alert ('Cannot Find Web Part');
}
}
PrintingHTML += '\n</BODY>\n</HTML>';
//Open new window to print
if (bolWebPartFound)
{
var PrintingWindow = window.open("","PrintWebPart", "toolbar,width=800,height=600,scrollbars,resizable,menubar");
PrintingWindow.document.open();
PrintingWindow.document.write(PrintingHTML);
// Open Print Window
PrintingWindow.print();
}
}
< /script>

Once you have done the above, you need to find the web part id of the web part you want to print when this button is clicked.
To do that, you view the source of the page and look for the web part title corresponding to the web part. It looks something like this:
<div WebPartID="0e77b913-99e6-402c-8558-cdd5a2100eb2" HasPers="false" id="WebPartctl00_m_g_0e77b913_99e6_402c_8558_cdd5a2100eb2" width="100%" class="ms-WPBody" allowDelete="false" style="" >
The id that you're interested in to replace <WebPartElementID> in the javascript above is highlighted.
Once it's all there, click on the button and a window will pop open that contains only the contents of the web part. Feel free to print.