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

-1

我想在打印页面时隐藏打印按钮和一些文本。我有以下文件：如何在打印页面上隐藏打印按钮和其他内容

的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部分

$('#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/

谢谢

来源

2017-02-14 nas

结帐这样的：https://www.tutorialspoint.com/css/css_printing.htm –

使用打印样式表，并隐藏需要的元素在里面 –

@nas，你为什么要问你的问题两次？ – DomeTune

与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

来源

2017-02-14 14:55:38

只需添加隐藏（）函数。

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

来源

2017-02-14 14:49:48 Parithiban

是的，我已经尝试过，但没有工作。检查jsfiddle – nas

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

来源

2017-02-14 14:51:09

没有这个不工作 – nas

哦，对不起，希望你能解决它：D –

你似乎使用引导。你尝试过使用助手类吗？ 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/

没有引导你可以创建自己的类：

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

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

来源

2017-02-14 14:51:26

你打开了小提琴吗？ –

编辑小提琴 –

更改您的打印功能：

window.print();

添加下面的CSS ：

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

来源

2017-02-14 14:59:46 ulysses

通过媒体查询，您可以在打印页面时添加css规则，例如display:none;。

@media print { 
 
    /* All your print styles go here */ 
 

 
    #PrintDiv{ 
 
     display:none !important; 
 
    } 
 
}

这样一来，你也可以隐藏在网页的横幅或删除背景，使文本颜色为黑色或这样的事情。 请注意，更改在浏览器内不可见：它们仅在您的页面正在打印时有效。如果你想看看它的样子，而不真的打印你的页面，更简单的方法是点击你的打印按钮或点击谷歌浏览器中的Ctrl+P，因为它们为你提供了即将展示的内容。

祝你好运;）

来源

2017-02-14 15:02:35

这里是一个CSS来实现你想要做什么（隐藏打印按钮和打印页面上的任何其他内容）

请新增无打印类的任何元素你想隐藏在打印页面上。

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

来源

2017-02-14 15:03:37 user7421148

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

回答

相关问题