从弹出窗口打印图像答案

【问题标题】：printing an image from a popup window从弹出窗口打印图像
【发布时间】：2012-07-26 16:32:05
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript jquery html printing

【解决方案1】：

为印刷媒体使用自定义 css

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

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

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

【讨论】：

这里，如果左上角为0，则得到图像的一半，只是我改成20,20之类的有什么建议吗？
top and left 0 表示打印内容到页面的左上角。它不对半像负责。像 div size 之类的其他东西（如果您使用父 div 打印，不仅是img） 或其他东西。
当我尝试通过谷歌浏览器打印时，会显示一个空白页。但是用firefox可以吗？会发生什么？
你能给出页面的链接吗？还是jsfiddle？
我认为当我使用模态窗口时会出现问题。有什么变化吗？

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

#printme { display: none; }

@media print
{

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

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

【讨论】：