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"> city of test</span><br /> 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.
