Add Print Option to SharePoint Page using Content Editor Web Part

Add Print Option to SharePoint Page

Print option can be added to a content Editor Web Part. This will enable Printing of all content within a SharePoint Page without the top part and left navigation.

<script type="text/javascript" src="http://sample.com/sites/test/JSFiles/jquery-1.4.2.min.js"></script>

<div>
<input id="printBtn" type="button" Value="Print all WebParts" 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>

Leave your comments below.

3 comments:

Anonymous said...

Hi , I tried to use your code in Office 365 but it is not working. Would appreciate if you could provide any solution.

Lee said...

Changed it to print a specific web part containing an InfoPath form. Works great. Thanks!

Anonymous said...

Hi
I tried to use your code in sharepoint 2013 webpart page, where i placed my custom Visual Webpart. I copied and pasted your code in Content Editor Webpart, but when i click on the button, it is not opening the print window. I'm new to the sharepoint, could you please help me out in this.

Thanks in advance.