Print each loop of individually using javascript

Question

Currently I'm printing the whole page with print icon using following code:

<a href="javascript:window.print()">
<img src="images/printIcon.gif" alt="Print the Records" width="40" height="40" border="0" /> 
</a>

I am reading a list of objects in JSP and displaying the object details using <c:foreach>. I want to display a print icon beside details of each object and print(to external printer) that individual object details only, when clicked on it. The whole page is in single div.

I'm not sure whether this can be done or not. Can I control the each loop using some sort of ID?

Edit:

Example:

  <c:forEach var="case" items="${distributions}">
     <table>
        <tr> 
            Print case details
        </tr>
     </table>
  </c:foreach>

If I have 10 distributions, I get 10 tables so want a print icon beside each table and when clicked on it, print that individual table only.

maybe a JS that trigger visibility of desired object before print? — jtheman, Mar 07 '13 at 22:08

score 2 · Answer 1 · answered Mar 07 '13 at 22:18

2

I have not done the following but theoretically it should work:

1) define a print stylesheet, with:

body.detail-print .detail-item{display:none}
body.detail-print .detail-item.current{display:block}

2) define an event listener, e.g. with jQuery

$(".detail-item .print").click(function(e) {
    $("body").addClass("detail-print");
    $(this).closest(".detail-print").addClass("current");
    window.print();
});

This should only print what is visible in your print stylesheet.

The only problem I see here: If someone wants to print the whole page afterwards, the browser will only print the last selected item. You could use a setTimeout to reset the classes. I have no better idea for now...

answered Mar 07 '13 at 22:18

topek

18,609
3
35
43

I understand what you're after, but you need to think of it in terms of within a "container". I get the gist (but could be wrong) that the OP wants to print only a specific area of the page; so in a sense, it's not just how to *show* the specific detail to print, but how to hide the errata which may live "above" and "around" it. Think like `.wrapper` and `#container` contexts. I'm almost of the mind to move or copy the detail view to `body` to make that containerization simpler. I've done `.no-print`classes specifically to handle this before, which is an inversion of the approach you site. – Jared Farrish Mar 07 '13 at 22:37
You can hide everything else with CSS, that's up to you. Just specify it in your print stylesheet. Effectively your .no-print is the same approach, hide everything you don't need and show what you need. – topek Mar 07 '13 at 22:42
`print()` is [blocking](http://jsfiddle.net/userdude/vVgC6/), so you should be able to remove those classes after it's returned execution. I just think with something like printing a specific piece of printable content, which could be buried within the content, it's not just hiding the other similar items, but hiding the other usually printable but now non-printable content without hiding a parent to that detail that needs to print. – Jared Farrish Mar 07 '13 at 22:57
Happy `5k` milestone. `:)` – Jared Farrish Mar 07 '13 at 23:05

score 0 · Accepted Answer · edited May 23 '17 at 12:11

In your block you could put the data in a td then use the method described in this post to print the contents of that td.

<script type="text/javascript">
$(function(){
 $(".printable").each(function(){
   var $td = $(this);
   var $printIconTD = $('<td><img src="images/printIcon.gif" alt="Print the Records" width="40" height="40" border="0" /></td>');
   $td.parent().append($printIconTD);
   $printIconTD.click(function(){
        Popup($td.html());
   });

});
});
</script>

....

 <c:forEach var="case" items="${distributions}">
 <table>
    <tr> 
        <td class="printable">Print case details</td>
    </tr>
 </table>

Only problem with this solution is god and everyone has pop-ups disabled, so you will have to put a notice of sorts on the page letting users know

your solution is working but not able to use Popup($td.html()); — Naveen, Mar 08 '13 at 21:14
Did you copy the popup function from the stack overflow post i linked to? — , Mar 11 '13 at 14:55

score 0 · Answer 3 · answered Mar 07 '13 at 22:25

A different way to what has been suggested would be to reload the page showing only the selected object and then call the printer dialog (e.g. on document load). So the printer icons next to the objects could link to the same page and pass it a parameter that you'll be printing and the ID of the object that you want to print.

Print each loop of individually using javascript

3 Answers3