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.

4 comments:

  1. good day,

    it is not working, when the new page open and i click on the print i receive a massage says that the web part is find

    ReplyDelete
  2. The problem I'm having is that when my window pops open to preview it shows 12-13 blank pages at the end, I'm not sure if this is the list or a problem with the script. but it was working in 2007, then we moved to 2010 and it started to print blank pages after.

    ReplyDelete
  3. also, we have a script that inserts headers into the list based on grouping within the list.

    ReplyDelete
  4. hi, how can I show "print preview window" instead of "print window"?

    ReplyDelete