0

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?

शेखर
  • 17,412
  • 13
  • 61
  • 117
Suja Shyam
  • 971
  • 2
  • 27
  • 57

4 Answers4

1

You can call window.print() when the button is clicked.

<input type="button" value="Print Admit Card" onClick="window.print();" />
Osiris
  • 4,195
  • 2
  • 22
  • 52
1

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?

Community
  • 1
  • 1
शेखर
  • 17,412
  • 13
  • 61
  • 117
1

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>
sp_m
  • 2,647
  • 8
  • 38
  • 62
0

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.