Printing Webpart


Let us consider that you have one of the below scenario:

Scenario 1:

You have multiple web parts in a page, say a list and a chart web part and you need to print only chart web part

Scenario 2:

You have an sharepoint list form with quick launch and you need print out without quick launch.

Solution:

  • Go to the desired page and edit it
  • Insert script editor web part and paste the below code or refer the below code in content editor webpart
  • To find the webpart element ID, press F12, point to the webpart and get the ID

<input onclick="javascript:void(PrintWebPart())" type="button" value="Print Web Part"/>

var WebPartElementID = "WebPartWPQ2";
//change the webpart element ID with yours

function PrintWebPart()
{
var bolWebPartFound = false;
if (document.getElementById != null)
{
var PrintingHTML = '\n\n';
if (document.getElementsByTagName != null)
{
var HeadData= document.getElementsByTagName("HEAD");
if (HeadData.length > 0)
PrintingHTML += HeadData[0].innerHTML;
}
PrintingHTML += '\n\n\n';
var WebPartData = document.getElementById(WebPartElementID);
if (WebPartData != null)
{
PrintingHTML += WebPartData.innerHTML;
bolWebPartFound = true;
}
else
{
bolWebPartFound = false;
alert ('Cannot Find Web Part');
}
}
PrintingHTML += '\n\n';
if (bolWebPartFound)
{
var PrintingWindow = window.open("","PrintWebPart", "toolbar,width=800,height=600,scrollbars,resizable,menubar");
PrintingWindow.document.open();
PrintingWindow.document.write(PrintingHTML);
PrintingWindow.print();
}
}