printing an image from a popup window

Question

I am trying to showing one image in bootstrap modal, also that pop-up window have one print button, so i need to take the print of that image, which showing in pop-up window.

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

But here i click the save button that whole page will take as print, not taking that pop-up window image. How is that happening?

Sarowar · Accepted Answer · 2012-07-26T23:12:35.187

1

Use custom css for print media

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

Now add class .to-print to div you want to print, in your case to img tag.

Check it out at jsfiddle (it is not using modal window, loaded directly)

edited Jul 26 '12 at 23:12

answered Jul 26 '12 at 16:38

Sarowar

452
4
14

here ,if the top and left is 0, then got the half of image, just i changed into some like 20,20 have any suggestions? – amtest Jul 26 '12 at 18:25
top and left 0 means that printed content goes to top left corner of the page. it is not responsible for half image. some thing else like div size *(if you are printing with parent div, not only `img`)* or something else. – Sarowar Jul 26 '12 at 23:16
when i am trying to print via google chrome, that will shows one blank page. But it ok with firefox? what that happens? – amtest Jul 27 '12 at 06:49
can u give any link to the page? or jsfiddle? – Sarowar Jul 27 '12 at 08:49
i think the problem will happen, when i am using the modal window. Have any changes? – amtest Jul 30 '12 at 05:06
got it from this link http://stackoverflow.com/questions/6638424/how-to-create-a-print-modal-using-javascript-jquery-etc – amtest Jul 30 '12 at 07:19
i have used like this $(function() { $('#printme').click(function(){ var contents = $('#qr-code-body').html(); var frame = $('#printframe')[0].contentWindow.document; frame.open(); frame.write(contents); frame.close(); $('#printframe')[0].contentWindow.print(); return false; }); }); – amtest Aug 12 '12 at 16:34

score 1 · Answer 2 · answered Jul 26 '12 at 16:39

The print function does not take a screenshot and print that out. If you wish to be able to print the item in your modal window then you will want to use a print CSS stylesheet and designate the visibility as display:block; or visibility:visible; for the desired element.

score 0 · Answer 3 · answered Jul 26 '12 at 16:42

Try this out. Whatever you want to print wrap it in a div tag with the id "printme"(or whatever you prefer) as you see below.

#printme { display: none; }

@media print
{

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

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

printing an image from a popup window

3 Answers3