从硬拷贝中删除打印按钮答案

【问题标题】：Remove print button from hard copy从硬拷贝中删除打印按钮
【发布时间】：2013-06-02 09:15:18
【问题描述】：

参考this link和this，我使用javascript作为打印报告

 <!DOCTYPE html>
<html>
<head>
<script>
function printpage()
{
var data = 'Sample Report<br />Sample Report<br />Sample Report<br />';
    var data = data+'<br/><button onclick="window.print()">Print the Report</button>';       
    myWindow=window.open('','','width=800,height=600');
    myWindow.innerWidth = screen.width;
    myWindow.innerHeight = screen.height;
    myWindow.screenX = 0;
    myWindow.screenY = 0;
    myWindow.document.write(data);
    myWindow.focus();
}
</script>
</head>
<body>

<input type="button" value="Print Preview" onclick="printpage()" />

</body>
</html>

但打印后，打印按钮仍然停留在硬拷贝上。那么如何在使用上述功能打印时隐藏硬拷贝中的打印按钮呢？

【问题讨论】：

标签： javascript button printing hide show-hide

【解决方案1】：

给你的按钮一个类，例如class="noprint"。然后将打印媒体的样式表添加到您的 CSS：

@media print {
  /* style sheet for print goes here */
  .noprint {
    visibility: hidden;
  }
}

详情：http://www.w3.org/TR/CSS2/media.html

【讨论】：

当您将必要的样式表添加到新窗口时，它应该可以工作，是的。
但不工作。请参阅sample here@Gerald Schneider
@PradeepShankar 您已将 css 放置在父窗口中，它在新打开的窗口中无效。我找到了this topic about adding css via javascript，但我还不能让它工作。当我完成工作时，我会更深入地研究它。它应该是这样的小提琴：jsfiddle.net/GeraldS/aVeTV/1
请在stackoverflow.com/questions/17759945/print-button-in-hard-copy/…查看答案

【解决方案2】：

在将 id 分配给打印按钮后，我刚刚使用以下 css 解决了这个问题。

<style type="text/css">
@media print {
    #myPrntbtn {
        display :  none;
    }
}
</style>

还有我的按钮如下。

<input id ="myPrntbtn" type="button" value="Print" onclick="window.print();" >

另外，您可以通过以下操作运行 javascript 函数...

隐藏按钮
使用window.print()打印页面；
再次显示按钮

一段代码...

<script type="text/javascript">
    function printMyPage() {
        //Get the print button
        var printButton = document.getElementById("myPrntbtn");
        //Hide the print button 
        printButton.style.visibility = 'hidden';
        //Print the page content
        window.print()
        //Show back the print button on web page 
        printButton.style.visibility = 'visible';
    }
</script>

参考Hide Print button while printing a web page

【讨论】：