如何在打印时隐藏打印按钮?

时间:2017-02-14 09:07:46

标签: javascript jquery html

我想在不打开新标签的情况下按下按钮打印页面。

我有以下几行代码可以帮我完成工作。

function PrintDiv() {    
    var contents = document.getElementById("wrapper").innerHTML;
    var frame1 = document.createElement('iframe');
    frame1.name = "frame1";
    frame1.style.position = "absolute";
    frame1.style.top = "-1000000px";
    document.body.appendChild(frame1);
    var frameDoc = frame1.contentWindow ? frame1.contentWindow : frame1.contentDocument.document ? frame1.contentDocument.document : frame1.contentDocument;
    frameDoc.document.open();
    frameDoc.document.write('<html><head><title>DIV Contents</title>');
    frameDoc.document.write('</head><body>');
    frameDoc.document.write(contents);
    frameDoc.document.write('</body></html>');
    frameDoc.document.close();
    setTimeout(function () {
        window.frames["frame1"].focus();
        window.frames["frame1"].print();
        document.body.removeChild(frame1);
    }, 500);

    return false;
}

我在div中有一个带有id包装器的打印按钮

<div id="button-container">
    <a href="#" id="PrintDiv" class="btn btn-success btn-primary"><span class="glyphicon glyphicon-print" aria-hidden="true"></span>Print</a>
</div>

我的问题是我无法在打印时隐藏打印按钮。

我已经尝试过隐藏行,但它不适用于我的情况。

$('#PrintDiv').css('visibility', 'hidden');

5 个答案:

答案 0 :(得分:5)

您需要具有基于打印的CSS样式规则 - 您还可以设置其他基于打印的规则 - 例如文档大小,背景颜色,图像规格等:

@media print {
   #button-container{
      display: none;
   }
}

答案 1 :(得分:0)

您好,您可以使用以下方法,

$('#PrintDiv').hide();

$('#PrintDiv').prop('disabled', 'true');

 @media print{
    #PrintDiv{
        display:none !important;
    }
}

答案 2 :(得分:0)

你需要@media print。只需在你的CSS文件底部添加它,

@media print {
    #print {display: none;}
}

答案 3 :(得分:0)

打印时只需使用媒体查询隐藏

@media print {
   #button-container{
      display: none;
   }
}

答案 4 :(得分:0)

&#13;
&#13;
  <div id="button-container">
     <a href="#" id="PrintDiv" class="btn btn-success btn-primary" style="visibility:block;"><span class="glyphicon glyphicon-print"n aria-hidden="true"></span>Print</a> </div>
&#13;
&#13;
&#13;

&#13;
&#13;
document.getElementById('PrintDiv').style.visibility = 'hidden';
&#13;
&#13;
&#13;

document.getElementById(&#39; PrintDiv&#39;)。style.visibility =&#39; hidden&#39;;