Share via

SharePoint 2010: Print a Web Part Zone

  • Article

Requirement: To print multiple Web Parts in a Web Part zone from the home page of a Web site.

Following: The steps we are requiring to achieve it:

  1. Add the Web Parts in a Web Part Zone.

  2. Open the site in the SharePoint Designer, open the home page .aspx file, select the Web Part Zone that you want to take the print of in the design view,  and wrap the Web Part zone with a <div> tag.

<div id="WebPartZone1">
   <table width="100%"  cellpadding=0 cellspacing=0 style="padding: 5px 10px 10px 10px;">
    <tr>
     <td valign="top" width="70%" colspan="4">
      <WebPartPages:WebPartZone .................
                                    ..................................
                                      ..............................
                              </WebPartPages:WebPartZone>
                    </td>
                    </tr>
                     </table>
</div>
  1. Add a Content Editor Web Part in the Zone and add the following script code in the source:
<style type="text/css">
.styled-button-2 {
-webkit-box-shadow: rgba(0, 0, 0, 0.0976562) 0px 1px 0px 0px;
 background-color: #EEE;
 border: 1px solid #999;
 color: #666;
 font-family: 'Lucida Grande', Tahoma, Verdana, Arial, Sans-serif;
 font-size: 11px;
 font-weight: bold;
 padding: 2px 6px;
 height: 28px;
}
</style>
<div id='printButton' align="right"><input type="button" class="styled-button-2" OnClick="javascript:void(PrintWebPart())" value="Print Dashboard"></div>
 
<script language="JavaScript">
//Controls which Web Part or zone to print
var WebPartElementID = "WebPartZone1";
 
//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 prButton = document.getElementById('printButton');
        prButton.style.display = 'none';
   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();
}
prButton.style.display = '';
}
</script>