从弹出窗口打印图像

printing an image from a popup window

本文关键字：打印 图像 窗口      更新时间：2024-02-26

我正在尝试以引导模式显示一个图像，而且弹出窗口有一个打印按钮，所以我需要打印该图像，该图像显示在弹出窗口中。

<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>

但在这里，我点击保存按钮，整个页面将作为打印，而不是弹出窗口的图像。这是怎么发生的？

为打印介质使用自定义css

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

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

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

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

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

#printme { display: none; }
@media print
{
    #printme { display: block; }
}
</style>


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

相关文章：