Add Print Option to SharePoint Page to print one particular web Part using Content Editor Web Part
Add Print Option to SharePoint Page to print one particular web Part using Content Editor Web Part
When the javascript code point to a particular Web Part by its web part ID, then the print option will try to print only the chosen web part.
<input type="button" ID="printBtn1" OnClick="javascript:void(PrintWebPart())" value="Print only tranSMART WebPart">
<script language="JavaScript">
//Controls which Web Part or zone to print
var WebPartElementID = "WebPartWPQ2";
//Function to print Web Part
function PrintWebPart()
{
var bolWebPartFound = false;
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.window.print();
PrintingWindow.document.close();
}
}
</script>
We can find the web part ID by viewing the source of a page.
Leave your comments below.
When the javascript code point to a particular Web Part by its web part ID, then the print option will try to print only the chosen web part.
<input type="button" ID="printBtn1" OnClick="javascript:void(PrintWebPart())" value="Print only tranSMART WebPart">
<script language="JavaScript">
//Controls which Web Part or zone to print
var WebPartElementID = "WebPartWPQ2";
//Function to print Web Part
function PrintWebPart()
{
var bolWebPartFound = false;
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.window.print();
PrintingWindow.document.close();
}
}
</script>
We can find the web part ID by viewing the source of a page.
Leave your comments below.
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.
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.
