In this tutorial we will learn how to print using javascript with print preview window using javascript. We will also learn how to print the whole web page and how to print the specific area of a web page using javascript. So let’s start.
1. Open notepad and write the JavaScript code as below and save as "PrintFunction.txt".
<html>
<head>
<script language="javascript" type="text/javascript">
function tablePrint()
{
var display_setting="toolbar=yes,location=no,directories=yes,menubar=yes,";
display_setting+="scrollbars=yes,width=750, height=600, left=100, top=25";
var content_innerhtml = document.getElementById("tbl_display").innerHTML;
var document_print=window.open("","",display_setting);
document_print.document.open();
document_print.document.write('<html><head><title>Print using javascript </title></head>');
document_print.document.write('<body style="font-family:verdana; font-size:12px;" onLoad="self.print();self.close();" >');
document_print.document.write(content_innerhtml);
document_print.document.write('</body></html>');
document_print.print();
document_print.document.close();
return false;
}
</script>
</head>
<body>
<p> Some text…………………</p>
<p> Some text………………..</p>
<p> Some text………………..</p>
<p>Some more text…………..</p>
<table id="tbl_display" style="text-align:left;" width="100%" cellpadding="2" cellspacing="2" border="0">
<tr>
<td align="left">
<img src="images/company_logo.gif" id="company_logo" style="display:none;"/>
<p> Thank you valuable user for signing up.</p>
<p> We think you’ve made a bold decision, and look forward to a productive meeting.</p>
<p> Please print out a copy of this invitation - it will serve as your boarding pass on this tour. </p>
<p> For additional information, you can email <a href="mailto:someone@someone.com">someone@someone.com</a> or call -
xxx-xxx-xxxx, xxx-xxx-xxx and look for Mr. Someone.</p>
</td>
</tr>
</table>
<table style="text-align:left;" width="100%" cellpadding="2" cellspacing="2" border="0">
<tr>
<td align="left">
<input type="button" value="Print" onclick="tablePrint();">
</td>
</tr>
</table>
</body>
</html>
2. Open your Sharepoint site click "All Site Content" then click "Site Assets" Library then upload your "PrintFunction.txt" file.
3. Goto the Site Action and click Edit Page.
4. Insert a New "Content Editor webpart" and click "Edit web part".
5. Content Editor Web Part properties is open. Provide a link of the .txt file i.e. "PrintFunction.txt" in the content link. Set chrome type "none" under Appearance tab then click ok.
6. The Content editor is showing as below then you can save your sharepoint page.
7. Once you save your sharepoint page then you click on print button you got a print dialog box then you can select your printer and print the page.
Enjoy the print function using javascript in a sharepoint content editor webpart.
1. Open notepad and write the JavaScript code as below and save as "PrintFunction.txt".
<html>
<head>
<script language="javascript" type="text/javascript">
function tablePrint()
{
var display_setting="toolbar=yes,location=no,directories=yes,menubar=yes,";
display_setting+="scrollbars=yes,width=750, height=600, left=100, top=25";
var content_innerhtml = document.getElementById("tbl_display").innerHTML;
var document_print=window.open("","",display_setting);
document_print.document.open();
document_print.document.write('<html><head><title>Print using javascript </title></head>');
document_print.document.write('<body style="font-family:verdana; font-size:12px;" onLoad="self.print();self.close();" >');
document_print.document.write(content_innerhtml);
document_print.document.write('</body></html>');
document_print.print();
document_print.document.close();
return false;
}
</script>
</head>
<body>
<p> Some text…………………</p>
<p> Some text………………..</p>
<p> Some text………………..</p>
<p>Some more text…………..</p>
<table id="tbl_display" style="text-align:left;" width="100%" cellpadding="2" cellspacing="2" border="0">
<tr>
<td align="left">
<img src="images/company_logo.gif" id="company_logo" style="display:none;"/>
<p> Thank you valuable user for signing up.</p>
<p> We think you’ve made a bold decision, and look forward to a productive meeting.</p>
<p> Please print out a copy of this invitation - it will serve as your boarding pass on this tour. </p>
<p> For additional information, you can email <a href="mailto:someone@someone.com">someone@someone.com</a> or call -
xxx-xxx-xxxx, xxx-xxx-xxx and look for Mr. Someone.</p>
</td>
</tr>
</table>
<table style="text-align:left;" width="100%" cellpadding="2" cellspacing="2" border="0">
<tr>
<td align="left">
<input type="button" value="Print" onclick="tablePrint();">
</td>
</tr>
</table>
</body>
</html>
2. Open your Sharepoint site click "All Site Content" then click "Site Assets" Library then upload your "PrintFunction.txt" file.
3. Goto the Site Action and click Edit Page.
No comments:
Post a Comment