从弹出窗口打印图像

时间:2012-07-26 16:32:06

标签: javascript jquery html printing

我试图在bootstrap模式中显示一个图像,弹出窗口也有一个打印按钮,所以我需要拍摄该图像的打印,该图像显示在弹出窗口中。

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

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

3 个答案:

答案 0 :(得分:1)

将自定义css用于打印介质

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

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

jsfiddle 处查看(不使用模态窗口,直接加载)

答案 1 :(得分:1)

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

答案 2 :(得分:0)

试一试。无论您想要打印什么,请将其包装在div标签中,其ID为“printme”(或您喜欢的任何内容),如下所示。

    

#printme { display: none; }

@media print
{

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

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