JavaScript控制打印时显示元素但打印后网页也显示该元素问题求助

问题根因 #

你在打印逻辑中直接修改了原页面内PARLogo、compName两个元素的行内display属性为block，打印完成后没有将属性复原，因此两个元素会一直显示在普通浏览状态的页面中。

解决方案1：最小改动现有代码 #

你只需要在获取完待打印的容器内容后，立刻将原页面的两个元素改回隐藏状态即可，不会影响iframe内的打印内容：

$(function () {
  $("#btnPrint").click(function () {
    // 先修改原元素显示，拿到带显示状态的内容
    document.getElementById('<%=PARLogo.ClientID %>').style.display = "block";
    document.getElementById('<%=compName.ClientID %>').style.display = "block";
    var contents = $("#test").html();
    // 拿到内容后立刻隐藏原页面元素，后续打印走iframe，和原页面无关
    document.getElementById('<%=PARLogo.ClientID %>').style.display = "none";
    document.getElementById('<%=compName.ClientID %>').style.display = "none";
    
    // 后面原有打印逻辑保持不变即可
    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();
    frameDoc.document.write('<html><head><title>DIV Contents</title>');
    frameDoc.document.write('</head><body>');
    frameDoc.document.write('<link href="style.css" rel="stylesheet" type="text/css" />');
    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);
  });
});

解决方案2：更优雅的CSS媒体查询实现（推荐） #

完全不需要用JS控制元素显隐，通过打印专用的CSS规则实现，没有时序问题，稳定性更高：

1. 先给两个需要打印时才显示的元素加公共类print-only，删掉行内的display:none属性：

<div id="test">
  <span style="display:flex">
    <img id="PARLogo" class="print-only" src="~/Images/Logo_Circle.png" alt="PAR" width="70" height="70" runat="server" >
    <span id="compName" runat="server" class="print-only" style="font-size:25px;color:black;width:100%"><span style="color:black">&nbsp;city of test</span><br />&nbsp;Test company</span>
  </span>
</div>

2. 在你的CSS文件（这里是引入的style.css）中加入以下规则：

/* 普通浏览状态下隐藏 */
.print-only {
  display: none !important;
}
/* 打印场景下显示 */
@media print {
  .print-only {
    display: block !important;
  }
}

3. 删掉JS中修改两个元素display属性的代码即可，原有打印逻辑其余部分保持不变。

内容的提问来源于stack exchange，提问作者Anjali