How can I print using JQuery

Question

I have nested divs..in which images generate dynamically ...this is the html code ..my problem is if i click the print button the corresponding image need to be printed.

<div id="outputTemp" style="display:none">
<div id="rightoutputimgae">
<div id="rightimgId" class="rightimg"  rel="tooltip" content="
 <img src='jqe13/image/1.jpg' class='tooltip-image'/> ">
<div id="outputimageId" class="outputimage">
   <img src="jqe13/image/1.jpg" alt="Right Bottom Image"></div>
 </div>
 <ul>
 <li id="outcheckbox"><input name="outCheck" type="checkbox"></li>
<li id="outedit">
  <a href="#"><img src="jqe13/image/edit_s.PNG" alt="edit" title="Edit">
  </a></li>
<li id="outdelete"><a href="#" onclick="deleteImg(div11)">
<img src="jqe13/image/delet_c.PNG" alt="delete" title="Delete"></a></li>
<li id="outfullscreen">
<a href="#">
<img src="jqe13/image/fullscreen_c.PNG" alt="Full Screen" class="fullscreen" 
  title="Full Screen"></a></li>
 <li id="outshare">
 <a href="#"><img src="jqe13/image/share_c.PNG" alt="Share" title="Share"></a>
 <div id="menu">
 <div id="tooltip_menu">
<a href="#" class="menu_top" id="email">
<img src="jqe13/image/email.PNG" alt="Email" title="Email"></a>
<a href="#" onClick="postToFeed()" class="facebook"><img src="jqe13/image/fb.PNG" 
alt="Facebook" title="Facebook"></a>
<a href="#" id="twitter">
<img src="jqe13/image/twitter.png" alt="Twitter" title="Twitter"></a>
<a href="#" class="menu_bottom" id="save">
 <img src="jqe13/image/save.PNG" alt="Save" title="Save"></a>
 </div>
 </div>
 </li>
 <li id="outprint"><a href="#">
 <img src="jqe13/image/print.PNG" class="printMe" alt="Print" title="Print"></a>
   </li>
 </ul>
  </div>

i need to print the image when i click the print button..

how do i write jquery function to print the image..

you put heading ad fancybox and you asked print issue..??

GautamD31
– GautamD31

2013-05-09 07:34:40 +00:00
Commented May 9, 2013 at 7:34 — GautamD31
– GautamD31, Commented May 9, 2013 at 7:34
oops...i've thought asking both

anu
– anu

2013-05-09 07:36:16 +00:00
Commented May 9, 2013 at 7:36 — anu
– anu, Commented May 9, 2013 at 7:36
Ok NP i have edited the question'

GautamD31
– GautamD31

2013-05-09 07:37:48 +00:00
Commented May 9, 2013 at 7:37 — GautamD31
– GautamD31, Commented May 9, 2013 at 7:37
thanx..can u help me with it?

anu
– anu

2013-05-09 07:39:02 +00:00
Commented May 9, 2013 at 7:39 — anu
– anu, Commented May 9, 2013 at 7:39

GautamD31 · Accepted Answer · 2013-05-09 07:40:46Z

56

Try like

$('.printMe').click(function(){
     window.print();
});

or if you want to print selected area try like

$('.printMe').click(function(){
     $("#outprint").print();
});

answered May 9, 2013 at 7:40

GautamD31

28.8k10 gold badges66 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mari Selvan Over a year ago

this is totally not working... window.print() alone works

Chuck D Over a year ago

Uncaught TypeError: $(...).print is not a function

SQL Hacks Over a year ago

Same problem for me: Uncaught TypeError: $(...).print is not a function

Neeraj · Accepted Answer · 2013-05-09 07:54:39Z

16

Hey If you want to print selected area or div ,Try This.

<style type="text/css">
@media print
{
body * { visibility: hidden; }
.div2 * { visibility: visible; }
.div2 { position: absolute; top: 40px; left: 30px; }
}
</style>

Hope it helps you

answered May 9, 2013 at 7:54

Neeraj

4,4898 gold badges32 silver badges51 bronze badges

Comments

Paul Roub · Accepted Answer · 2017-09-21 14:13:37Z

6

function printResult() {
    var DocumentContainer = document.getElementById('your_div_id');
    var WindowObject = window.open('', "PrintWindow", "width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes");
    WindowObject.document.writeln(DocumentContainer.innerHTML);
    WindowObject.document.close();
    WindowObject.focus();
    WindowObject.print();
    WindowObject.close();
}

edited Sep 21, 2017 at 14:13

Paul Roub

36.5k27 gold badges88 silver badges95 bronze badges

answered Sep 21, 2017 at 14:04

Raman Aggarwal

971 silver badge4 bronze badges

Comments

Ariwibawa · Accepted Answer · 2017-08-22 06:59:59Z

0

There is a jquery print area. I've been using it for some time now.

$(".printMe").click(function(){
   $("#outprint").printArea({ mode: 'popup', popClose: true });
});

answered Aug 22, 2017 at 6:59

Ariwibawa

68713 silver badges26 bronze badges

Comments

Alexandre · Accepted Answer · 2023-08-11 08:40:15Z

0

Since the accepted answer is not working if you don't want to print the whole window :

To use $('.element').print(), you need DoersGuild's jQuery.print package

Here's the doc !

answered Aug 11, 2023 at 8:40

Alexandre

1

1 Comment

Harrison Over a year ago

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review

Collectives™ on Stack Overflow

How can I print using JQuery

5 Answers 5

3 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related