Tengo dos controles en mi página web. El estilo de esos dos controles está configurado para mostrar ninguno. Quiero mostrar estos dos controles al imprimir, pero no quiero que estos controles aparezcan en mi página web. cada vez que invoco la función de impresión, estos dos controles aparecen en la página de impresión, pero también aparecen en la página web cada vez que termino de imprimir. A continuación se muestra el código de mi página web:
<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> <input type="button" id="btnPrint" value="Print" />A continuación se muestra el código para imprimir la etiqueta div:
<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>como puede ver, estoy haciendo estos dos controles "PARLogo" y "compName" visibles en javascript, pero son invisibles en una página web. No estoy seguro de por qué, pero estos controles son invisibles cuando se carga la página, pero tan pronto como hago clic en el botón de impresión, estos dos controles también aparecen en la página web normal que no quiero.
cualquier ayuda será apreciada.
¿Has probado css media query "imprimir"?
@media print { /* print specific styles go here */ }o restablecer estos:
document.getElementById('<%=PARLogo.ClientID %>').style.display = "block"; document.getElementById('<%=compName.ClientID %>').style.display = "block"; ..... frame1.remove(); document.getElementById('<%=PARLogo.ClientID %>').style.display = "none"; document.getElementById('<%=compName.ClientID %>').style.display = "none";