Here I will show how to print a portion of a web page using Javascript.
In this example I will show how to print without making the page blank. That is, it
will retain the html of the original page. This method is also not using another pop up
window for printing.
Suppose there is a User Details Form with Payment Data. On click of link named "Print Receipt", user can print his Payment Details as following :
I have placed Container of Payment Details (here table) inside a div named "divPrint".
Javascript Function is as follows:
<script type="text/javascript">
function printDiv() {
//Get the HTML of div
var divElements = "<div style='width: 90%;border:thin solid black;padding:10px;'><table width='100%'><tr><td><strong><u>Payment Details</u></strong></br></br></td></tr><tr><td>" + document.getElementById('divPrint').innerHTML + "</td></tr></table></div>";
//Get the HTML of whole page
var oldPage = document.body.innerHTML;
//Reset the page's HTML with div's HTML only
document.body.innerHTML =
"<html><head><title></title></head><body>" +
divElements + "</body>";
//Print Page
window.print();
//Restore orignal HTML
document.body.innerHTML = oldPage;
}
</script>
In this function, first get the HTML of the div of the Payment section in a variable. Then get the HTML of the whole page in another variable using document.body.innerHTML.
Next is to reset the page's HTML with div's HTML and print the page. After that restore the original HTML.
Code for LinkButton named "Print receipt" is as follows :
<asp:LinkButton ID="lnkPrint" OnClientClick="javascript:printDiv();return false;"
runat="server" Font-Bold="true" Text="Print receipt" CausesValidation="false"></asp:LinkButton>
In this example I will show how to print without making the page blank. That is, it
will retain the html of the original page. This method is also not using another pop up
window for printing.
Suppose there is a User Details Form with Payment Data. On click of link named "Print Receipt", user can print his Payment Details as following :
I have placed Container of Payment Details (here table) inside a div named "divPrint".
Javascript Function is as follows:
<script type="text/javascript">
function printDiv() {
//Get the HTML of div
var divElements = "<div style='width: 90%;border:thin solid black;padding:10px;'><table width='100%'><tr><td><strong><u>Payment Details</u></strong></br></br></td></tr><tr><td>" + document.getElementById('divPrint').innerHTML + "</td></tr></table></div>";
//Get the HTML of whole page
var oldPage = document.body.innerHTML;
//Reset the page's HTML with div's HTML only
document.body.innerHTML =
"<html><head><title></title></head><body>" +
divElements + "</body>";
//Print Page
window.print();
//Restore orignal HTML
document.body.innerHTML = oldPage;
}
</script>
In this function, first get the HTML of the div of the Payment section in a variable. Then get the HTML of the whole page in another variable using document.body.innerHTML.
Next is to reset the page's HTML with div's HTML and print the page. After that restore the original HTML.
Code for LinkButton named "Print receipt" is as follows :
<asp:LinkButton ID="lnkPrint" OnClientClick="javascript:printDiv();return false;"
runat="server" Font-Bold="true" Text="Print receipt" CausesValidation="false"></asp:LinkButton>
No comments:
Post a Comment