Hide controls after printing using JavaScript and jQuery in ASP.Net

anjali600
 
on Sep 20, 2021 10:45 PM
458 Views

I have two controls on my web page. The style of those two controls is set to display none. I want to display these two controls when printing, but I don't want these controls to show up on my web page. Whenever I invoke the print function, these two controls show up on the print page, but they also show up on the web page whenever I am done printing. Below is my code for .aspx page:

<div id="test">
    <span style="display:flex">
    <img id="PARLogo" style="display:none" src="~/Images/Logo_Circle.png" alt="PAR" width="70" height="70"  runat="server" >
    <span id="compName" runat="server" style="font-size:25px;color:black;width:100%; display:none"><span style="color:black">&nbsp;city of test</span><br />&nbsp;Test company</span> 
    </span>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-sm-4">
                <asp:GridView ID="grdCalculate" runat="server" GridLines="Horizontal" Width="100%"
                    CssClass="table table-responsive table-hover table-striped table-bordered table-condensed">
                </asp:GridView>
            </div>
        </div>
    </div>
</div>

below is the button to invoke the print function:

<input type="button" id="btnPrint" value="Print" />

below is the javascript function:

    <script type="text/javascript">
        $(function () {
            $("#btnPrint").click(function () {
                document.getElementById('<%=PARLogo.ClientID %>').style.display = "block";
                document.getElementById('<%=compName.ClientID %>').style.display = "block";
                var contents = $("#test").html();
                var frame1 = $('<iframe />');
                frame1[0].name = "frame1";
                frame1.css({ "position": "absolute", "top": "-1000000px" });
                $("body").append(frame1);
                var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument;
                frameDoc.document.open();
                //Create a new HTML document.
                frameDoc.document.write('<html><head><title>DIV Contents</title>');
                frameDoc.document.write('</head><body>');
                //Append the external CSS file.
                frameDoc.document.write('<link href="style.css" rel="stylesheet" type="text/css" />');
                //Append the DIV contents.
                frameDoc.document.write(contents);
                frameDoc.document.write('</body></html>');
                frameDoc.document.close();
                setTimeout(function () {
                    window.frames["frame1"].focus();
                    window.frames["frame1"].print();
                    frame1.remove();
                }, 500);
            });
        });
    </script>

as you can see, I am making these two controls "PARLogo" and "compName" visible in JavaScript, but they are invisible in aspx page. Not sure why, but these controls are invisible when the page loads, but as soon as I click on the print button, these two controls appear on the regular web page too which I don’t want. Any help will be greatly appreciated.

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Sep 21, 2021 02:26 AM

Use below code.

JavaScript

<script type="text/javascript">
    $(function () {
        $("#btnPrint").click(function () {
            document.getElementById('<%=PARLogo.ClientID %>').style.display = "block";
            document.getElementById('<%=compName.ClientID %>').style.display = "block";
            var contents = $("#test").html();
            var frame1 = $('<iframe />');
            frame1[0].name = "frame1";
            frame1.css({ "position": "absolute", "top": "-1000000px" });
            $("body").append(frame1);
            var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument;
            frameDoc.document.open();
            //Create a new HTML document.
            frameDoc.document.write('<html><head><title>DIV Contents</title>');
            frameDoc.document.write('</head><body>');
            //Append the external CSS file.
            frameDoc.document.write('<link href="style.css" rel="stylesheet" type="text/css" />');
            //Append the DIV contents.
            frameDoc.document.write(contents);
            frameDoc.document.write('</body></html>');
            frameDoc.document.close();
            setTimeout(function () {
                window.frames["frame1"].focus();
                window.frames["frame1"].print();
                frame1.remove();
            }, 500);
            document.getElementById('<%=PARLogo.ClientID %>').style.display = "none";
            document.getElementById('<%=compName.ClientID %>').style.display = "none";
        });
    });
</script>