根据单击的元素打印页面的不同部分

Question

I'm looking for a clever way to print a small part of a page, depending on what link the user is clicking. An example:

Item 1  PRINT
Item 2  PRINT

If I click on print next to Item 1, I just want Item 1 to open up in print dialog. Likewise I only want Item 2 to open up if I click next to that item.

I know of <a href="javascript:window.print()"> and how to add for instance a class named noprint to whatever element I would like not to be printed, but what I'm looking for is some clever, dynamic way of having it change depending on what element on the page the user is interacting with.

Anyone know of a way to solve this?

Answer 1

This is my favorite way of doing it. It doesn't work here on S/O, but it works in this pen

  function printDiv(id) { var printContents = document.getElementById(id).innerHTML; var originalContents = document.body.innerHTML; document.body.innerHTML = printContents; window.print(); document.body.innerHTML = originalContents; } 

 <div id="first">I'm first</div> <button onclick="printDiv('first')">Print</button> <div id="second">I'm second</div> <button onclick="printDiv('second')">Print</button> 

Answer 2

1. Create separate action on backend which will render desired item in appropriate ready to print view (somthing like /print?itemId=123 )
2. By click on link open that view in separate window and there call window.print();

It seems like a big job for small task, but you'll get significant benefit of independent and flexible on-screen and print views of same item.