Question

我试图在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>

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

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

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

Answer 3

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

#printme { display: none; }

@media print
{

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

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

从弹出窗口打印图像

3 个答案: