Click here to Skip to main content
15,884,473 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I want to display signature of the person in the asp.net page only when user clicks on print button.

I have created a certificate page where page can have digital signature of the person
but user should able to see signature only in the print preview page but not in the actual aspx page.

How can i achieve this..any suggestions please.

Thanks in Advance..

What I have tried:

JavaScript
function cert_Print() {
            
                var contents = document.getElementById("divPrintContent").innerHTML;
                var frame1 = document.createElement('iframe');
                frame1.name = "frame1";
                frame1.style.position = "absolute";
                frame1.style.top = "-1000000px";
                document.body.appendChild(frame1);
                var frameDoc = frame1.contentWindow ? frame1.contentWindow : frame1.contentDocument.document ? frame1.contentDocument.document : frame1.contentDocument;
                frameDoc.document.open();
                frameDoc.document.write('');
                frameDoc.document.write('');
                frameDoc.document.write(contents);
                frameDoc.document.write('');
                frameDoc.document.close();
                setTimeout(function () {
                    window.frames["frame1"].focus();
                    window.frames["frame1"].print();
                    document.body.removeChild(frame1);
                }, 500);
                return false;
            }
Posted
Updated 14-Jan-17 2:25am

1 solution

In ASP.NET (or overall web development), did you know that CSS can control what is shown on screen and what is hidden, until a state is met? Such as being in the state of printed?

You can hide the sign,
CSS
#signelement {
   display: none;
}

Then, you can show it in the printed version of your web page, using CSS3 media queries,
CSS
@media print {
   #signelement {
      display: inline-block; /* Or whatever. */
   }
}

This will control even the elements created by JavaScript on runtime. So you can easily manage what is visible and what is hidden from the user.

For more, Using media queries - CSS | MDN[^]
 
Share this answer
 
Comments
syedkhaleel2010 15-Jan-17 8:38am    
I want to show the sign only on user clicks print button where window.print(); function calls.is there anyway we can achieve this.
Afzaal Ahmad Zeeshan 15-Jan-17 9:20am    
Did you even try what I said? The print settings apply to the print preview as well.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900