Add Print Page Functionality Using JavaScript

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:

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:

5 thoughts on “Add Print Page Functionality Using JavaScript”

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.

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.