I have a web application in which we collect student data in a webpage. This aspx page has a "Print Admit Card" button which when click is intended to print the admit card. I have dynamically created an html layout for the card and want this be printed. How can this be attained?
4 Answers
You can call window.print()
when the button is clicked.
<input type="button" value="Print Admit Card" onClick="window.print();" />

- 4,195
- 2
- 22
- 52
-
i need to print dynamically created html string in an admit card format rather than the webpage. – Suja Shyam Nov 27 '12 at 05:14
-
print() has to be called on a window object. See http://stackoverflow.com/a/1247098/384155 – Osiris Nov 27 '12 at 05:17
-
can you help with code to pass the html string as input to the javascript? – Suja Shyam Nov 27 '12 at 05:18
-
is there any method in asp.net rather than using javascript? – Suja Shyam Nov 27 '12 at 05:19
The best idea is keep the values in the session and open a new window on click event.
And on page load create the html.
And on window.load event call the java-script print as follow
body onload="window.print();"
There may be some of your controls on your page which you don't want to print.
For this you can use css
classes.
There is a good option in css
Media Types in css which hide the content while printing the page.
There is good post in the same website you can go through it.
Good rules for setting up print css?
This code may help u..
HTML Code:
<div id="printarea">
//content you want to print
</div>
<input id="btnprint" type="button" onclick="PrintDiv()" value="Print" /></center>
Javascript function:
<script type="text/javascript">
function PrintDiv() {
var divToPrint = document.getElementById('printarea');
var popupWin = window.open('', '_blank', 'width=300,height=400,location=no,left=200px');
popupWin.document.open();
popupWin.document.write('<html><body onload="window.print()">' + divToPrint.innerHTML + '</html>');
popupWin.document.close();
}
</script>

- 2,647
- 8
- 38
- 62
Using CSS you can specify the media type the CSS is designed for. What this will do is that when you ask for it to be printed the rest of the page is removed and only the portion that looks like the card will be printed. Here is a link to get you started. CSS Media Types. In addition you can reopen your page with the print css only effective and as Osiris indicated call the Window.print(); to print the page.

- 33
- 5