Master Page – SharePointRyan

This morning I received a request from my current client which I’ve gotten before, but not in SharePoint 2010.

They wanted the ability to print page and list view content easily, and without the left and top navigation elements – basically just the main content zone.

I knew there was a way as I had done this in 2007, but I had to do a quick search for the exact JavaScript. I found a Codeplex project that included a Content Editor Web Part with JavaScript and this worked almost perfectly for my scenario.

This solution works great if you want to print a single page, but I wanted reusability and something that I could do once and have it work for every page in a site.

I ended up copying the script verbatim into a PrintScript.js file which I saved under /_layouts/1033, here is the code of the file:

<!-- Web Part/region to print -->
var WebPartElementID = "ctl00_MSO_ContentDiv";


//Function to print Web Part
function PrintWebPart()
{
 var bolWebPartFound = false;
 //var currentPage = document.location.href;
 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();
 }
}

Once I had the JavaScript file saved in the layouts directory, I could simply add a ScriptLink tag in the <head> section of my master page:

<SharePoint:ScriptLink name="PrintScript.js" runat="server"/>

That’s great, now my master page has the ability to print any page; but where do I put the link? At first I thought of adding a new DIV in the footer area of my page, but I didn’t want the Print link to be included in the printed version of the page.

A quick search on how to add an item to the Site Actions menu gave me EXACTLY what I wanted – and since this is an Intranet solution, every user that needs to print will have at least Contribute permissions and therefore will have the Site Actions menu available to them.

In order to display what I wanted in the Site Actions menu, I added the following code under the <CustomTemplate> section:

<!--Print item added to Site Actions -->
<SharePoint:MenuItemTemplate runat="server" id="MenuItem_PrintPage"
	Text="Print this page"
	Description="This will launch a new window to print this page."
	ImageUrl="/_layouts/images/Print.png"
	MenuGroupId="100"
	Sequence="110"
	ClientOnClickNavigateUrl="javascript:PrintWebPart();"
	/>
<!--End print item-->

And finally, here is what I’m left with:

And clicking the Print Page option gives me a nice, clean window with no navigational elements:

Share: