Question

我正在尝试在打印页面时隐藏打印按钮和一些文本。我有以下文件：

的test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
    <div id="wrapper" class="estimated-fleet-page">
        <div id="container">
            <h2>Summary Report</h2>

            <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>
            <table>
              <tr>
                <th>Company</th>
                <th>Contact</th>
                <th>Country</th>
            </tr>
            <tr>
                <td>Alfreds Futterkiste</td>
                <td>Maria Anders</td>
                <td>Germany</td>
            </tr>
            <tr>
                <td>Centro comercial Moctezuma</td>
                <td>Francisco Chang</td>
                <td>Mexico</td>
            </tr>
            <tr>
                <td>Ernst Handel</td>
                <td>Roland Mendel</td>
                <td>Austria</td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>

的style.css

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

js part

$('#PrintDiv').click(function(){
    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></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;
})

输出：

如何删除上面图片“摘要报告”上方的打印按钮和内容。

我也在jsfiddle中发布了这个问题。

https://jsfiddle.net/zan/b780Lcte/2/

谢谢

Answer 1

使用jquery，您可以在单击时隐藏打印按钮，并在打印后显示回来：

$('#PrintDiv').click(function(){
$(this).hide();
        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></title>');
        frameDoc.document.write('</head><body>');
        frameDoc.document.write(contents);
        frameDoc.document.write('</body></html>');
        frameDoc.document.close();
        setTimeout(function () {
      $('#PrintDiv').show();
            window.frames["frame1"].focus();
            window.frames["frame1"].print();
            document.body.removeChild(frame1);
        }, 500);
        return false;
})

fiddle

Answer 2

将您的打印功能更改为：

window.print();

在下面添加css：

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

Answer 3

只需添加hide（）函数。

$('#PrintDiv').click(function(){
        $(this).hide();

Answer 4

也许你可以尝试document.getElementById("print").style.display = 'none';

Answer 5

您好像使用Bootstrap。您是否尝试使用帮助程序类？ http://getbootstrap.com/css/#responsive-utilities-print

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

hidden-print css类应该在打印时隐藏容器

更新了小提琴： https://jsfiddle.net/b780Lcte/9/

如果没有bootstrap，您可以创建自己的类：

@media print {
  .hidden-print {
    display:none;
  }
}

当然你必须使用window.print()函数来解释CSS样式表。

Answer 6

使用媒体查询时，您可以在打印页面时添加display:none;等css规则。

@media print { 
    /* All your print styles go here */

    #PrintDiv{
        display:none !important;
    }
}

这样，您还可以隐藏页面的横幅或删除背景，使文本颜色变为黑色或类似的东西。 请注意，更改将在浏览器中不可见：它们仅在您的页面打印时有效。如果您希望看到它的样子而不打印您的页面，更简单的方法是点击您的打印按钮或点击谷歌浏览器中的Ctrl+P，因为它们为您提供了将要打印的内容的实时表示。

祝你好运;）

Answer 7

这是一个用于实现您想要做的事情的CSS（隐藏打印按钮和打印页面上的任何其他内容）

请将无打印类添加到要在打印页面上隐藏的任何元素。

@media print {
    .no-print
    {
        display: none !important;
    }
}

如何在打印页面上隐藏打印按钮和其他内容

7 个答案: