上下文菜单，用于打印打印上下文菜单本身的页面

context menu for printing the page printing the context menu itself

本文关键字：上下文 打印 菜单 用于      更新时间：2023-09-26

我正在一个只有一张图片的页面上构建一个上下文菜单，我希望用户在右键单击时只有两个选项：打印或关闭页面。除了打印它之外，一切都很好，上下文菜单也会打印出来。如何在单击打印后立即删除菜单，使其不打印？这是一个小提琴：

查看： http://jsbin.com/eQiToLA/2

编辑：http://jsbin.com/eQiToLA/2/edit

   $(document).ready(function(){
      $('#imgContainerDiv').vscontext({menuBlock: 'vs-context-menu'});
   });

我的标记在这里：

<body>
  <div id="imgContainerDiv">
    <img src="http://lorempixel.com/output/city-q-c-640-480-8.jpg" alt="city" />
  </div>
  <div class="vs-context-menu">
   <ul>
       <li class="print"><a href="#" onclick="window.print();return false;" id="menu_1">Print</a></li>
       <li class="exit"><a href="#" onclick="window.close();return false;" id="menu_2">Close</a></li>
   </ul>
</div>
</body>

CSS Print Media 可用于应用样式进行打印。 

@media print {
    .vs-context-menu {display:none;}
}

或者你可以有一个单独的样式表

<LINK rel="stylesheet" type"text/css"
     href="print.css" media="print">

添加一个打印样式表，隐藏您不想打印的任何元素。

通常，打印样式表将优化页面以在纸上阅读，例如删除标题图像，将文本设置为白底黑字以及删除任何不必要的元素。

相关文章：