Print asp.net with javascript

Question

I want to print a aspx page but before printing I want to hide some controls from the page and after that I want to show again those controls. I'm using this code:

        String scriptText = "<script language='javascript'>";
        scriptText += "document.getElementById('textB1').style.visibility = \"hidden\";";
        scriptText += "document.getElementById('panel').style.visibility = \"hidden\";";           
        scriptText += "window.print();";
        scriptText += "document.getElementById('textB1').style.visibility = \"visible\";";
        scriptText += "document.getElementById('panel').style.visibility = \"visible\";";  
        scriptText += "</script>";
        ClientScript.RegisterStartupScript(this.GetType(), "Print", scriptText);

The problem is that I don't know how windows.print() works because the controls are still visible on my printed page. How to get the right time when the printed page was captured? Only after that, the controls to be set to visible?

will document.write('asp.net') on a window.onload function do? :) — deostroll
– deostroll, Commented Nov 25, 2013 at 12:53

Nunners · Accepted Answer · 2013-11-25 12:57:47Z

1

If you simply want to hide elements on a page whilst printing it is a much easier option to use the CSS print media type.

For more information on CSS Media Types see here

Example :

Add the following CSS to either your page or to a Stylesheet

@media print {
    .hiddenOnPrint {
        display:none;
    }
}

And then add this class to each of the controls you want to hide on your page whilst printing :

<asp:TextBox ID="textB1" runat="server" CssClass="hiddenOnPrint"></TextBox>
<asp:Panel ID="panel" runat="server" CssClass="hiddenOnPrint"></panel>

This is a much more controlled way to handle this as opposed to Javascript.

Example JSFiddle

answered Nov 25, 2013 at 12:57

Nunners

3,04715 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dpv Over a year ago

Yes, works very fine! :) Thanks. I still have a question. On IE I have header (page name, pages,etc) and footer (URI) to printed pages. How can I get rid of them?

Nunners Over a year ago

@dpv Only way I know of would to be edit the Print Setup - Go to the Settings, select print and then select Page Setup. There you can set the Header and Footer to be empty. This will only work on the machine you apply this to, so others will still receive the headers.

Collectives™ on Stack Overflow

Print asp.net with javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related