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 (没有使用模态窗口，直接加载)