從彈出窗口打印圖像

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

現在將class .to-print添加到要.to-print的div中，在您的情況下為img標記。

在jsfiddle檢查出來（它不是使用模態窗口，直接加載）

Answer 2

打印功能不會截取屏幕截圖並將其打印出來。 如果您希望能夠在模態窗口中打印項目，那么您將需要使用print CSS樣式表並將可見性指定為display:block; 或visibility:visible; 為了所需的元素。

Answer 3

試試吧。 無論您想要打印什么，請將其包裝在div標簽中，其ID為“printme”（或您喜歡的任何內容），如下所示。

#printme { display: none; }

@media print
{

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

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