Friday, March 16, 2012

Print a Web Part Zone

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

Following are the steps to achieve this

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 out in the design view,  and wrap the Web Part zone by adding 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>


3. 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>

Posted by at

6 comments:

  1. AnonymousAugust 3, 2012 at 12:05 PM

    Awesome! Thanks!

    ReplyDelete
  2. AnonymousNovember 19, 2012 at 9:01 AM

    Thanks Alot!!!

    ReplyDelete
  3. AnonymousJuly 1, 2013 at 10:13 AM

    Hi,
    I don;'t see the print button on the html page

    ReplyDelete
  4. AnonymousNovember 29, 2013 at 4:37 AM

    This is gold! Just what I needed. Huge thanks!

    ReplyDelete
  5. AnonymousMarch 7, 2014 at 2:08 PM

    excellent, thanks!

    ReplyDelete
  6. Indranil SarkarApril 17, 2014 at 2:41 PM

    Thank you so much. You should have been blessed with lots of wishes.

    ReplyDelete

Subscribe to: Post Comments (Atom)