javascript - 从弹出窗口打印图像

Question

我正在尝试在引导模式中显示一张图像，该弹出窗口也有一个打印按钮，因此我需要打印该图像，该图像显示在弹出窗口中。

<script type="text/javascript">    
   function code(){    
     $("#qbody").html("<p align='center'><img 
     src='http://chart.apis.google.com/chart?
     cht=qr&chs=300x300&chl=code&chld=H|0'/></p>");  
   }  
</script>  
<div class="modal fade">
  <div class="modal-body" id="qbody">
   <a href='#' class='btn btn-primary pull-left'
   onClick='window.print();'>Save</a>"
  </div> 
</div> 

但是在这里我单击整个页面将作为打印的保存按钮，而不是使用该弹出窗口图像。这是怎么回事？

Answer 1

为打印媒体使用自定义 css

@media print{
   body{
     visibility: hidden;
   }
  .to-print{
     visibility: visible;
     position: absolute;
     top: 0;
     left: 0;
   }
}

现在将类添加.to-print到要打印的 div 中，在您的情况下进行img标记。

在jsfiddle上查看 （它不使用模态窗口，直接加载）

Answer 2

打印功能不会截取屏幕截图并将其打印出来。如果您希望能够在模态窗口中打印项目，那么您将需要使用printCSS 样式表并将可见性指定为所需元素display:block;或visibility:visible;为所需元素。

Answer 3

试试这个。如下所示，无论您想打印什么，都将其包装在一个 div 标记中，其 id 为“printme”（或您喜欢的任何内容）。

#printme { display: none; }

@media print
{

    #printme { display: block; }
}
</style>

<div id="printme">
   your image goes here
</div>