Tuesday, May 4, 2010

HOW TO Display a "Printer Friendly" button on SharePoint pages

Insert the following code in a Content Editor Web Part to display a “Printer Friendly” button on SharePoint pages. When you click the button, it opens the SharePoint page in a new window. And the page will not contain the left and top nav bars. You are also presented with the list of printers that you can print to. And you can also do a Print Preview. This way you get to print only the content that you are really interested in, as opposed to the navigation menus, etc.

NOTE: In the code sample below, the jQuery file was stored in a SharePoint Doc Lib. You can also point to the Google site which hosts the jQuery file like this:

Credit:

http://web.iotap.com/Blogs/tabid/277/EntryId/82/Printer-Friendly-Page-Sharepoint-web-part.aspx

<script type="text/javascript" src="jQuery/jquery-1.3.2.min.js"></script>

<div>

<input id="printBtn" type="button" Value="Printer Friendly" alt="Print this page" style="margin-top:10px;margin-left:10px;"/>

</div>

<script>

$(document).ready(function()

{

var strlink="";

$("link[rel='stylesheet']").each(function()

{

strlink+="<link rel = 'stylesheet' href='"+$(this).attr('href')+"' type='text/css'/>";

});

$("#printBtn").click(function()

{

var htmlStr ="<html><head>"+strlink+"</head><body>"+$("#MSO_ContentTable").parent().html()+"</body></html>";

var PrintingWindow = window.open("about:blank","","toolbar,width=800,height=600,scrollbars,resizable,menubar");

PrintingWindow.document.open();
PrintingWindow.document.write(htmlStr);
PrintingWindow.document.close();
PrintingWindow.focus();
PrintingWindow.document.getElementById("printBtn").style.display="none";
PrintingWindow.print();
});

});

</script>

9 comments:

Stowe Building said...

This worked great to add the "Printer Friendly" Button but it doesn't call up anything. Was I suppose to add something to a library really did not understand the: NOTE: In the code sample below, the jQuery file was stored in a SharePoint Doc Lib. You can also point to the Google site which hosts the jQuery file like this:

Anonymous said...

Is there a way to print selected documents using a specific infopath view to a prespecified printer? My users want to select the doc and click print.

Sweet Fairy said...

Nice post with great details. Which kind of printer can print Metal business cards?

Nikki Redington said...

Thank you so much, this worked beautifully!!

Esther Lopez Navarro said...

Awesome Code :)
Thanks a lot!!

Anonymous said...

thank you!!! this is exactly what I needed.

Anonymous said...

I tried copy this code, created the jquery library locally but when I click on the button a page comes up but says null. Any ideas? Thanks!

Anonymous said...

Receiving a undefined error when executing. Unable to get property style of undefined or null reference.

Aseem Sood said...

I get a pop-up window with content as "null". Does this work for SharePoint online?