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:
SharePointRyan 
As mentioned on Twitter I would tend towards a print stylesheet. The great thing about a print stylesheet is you can change from a sans-serif to a serif font for extensive offline reading. The “print this page” link can pull up the print dialogue but the stylesheet takes over from there.
Thanks Chris, good suggestion – I didn’t think to go with just a print stylesheet. I like the idea of using the print-specific stylesheet in conjunction with this solution.
This is a great article Ryan, thank you so much!! saved me a heap of trouble and time, cheers, Billy
Thanks Billy, glad this helped you out!
Regards,
Ryan
I’ve posted an updated version of the print javascript that’s a lot more flexible, cleaner and more reusable. The upside of the javascript over just media css is you can add additional content/styling within the printed output. Like if you have letter head or a time stamp etc. it’s easier to input it with the javascript method.
http://sp2010ext.codeplex.com/releases/view/80242 the new version accepts just a handle to the element on the page you want to print and has a placeholder for adding in additional css/elements in to the page.