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

Question

我正在寻找一种聪明的方法来打印页面的一小部分，具体取决于用户单击的链接。一个例子:

Item 1  PRINT
Item 2  PRINT

如果我点击元素 1 旁边的打印，我只想在打印对话框中打开元素 1。同样，我只希望在单击该元素旁边时打开元素 2。

我知道<a href="javascript:window.print()">以及如何添加一个名为 noprint 的类到我不希望打印的任何元素，但我正在寻找的是一些聪明的、动态的方式让它根据用户正在与之交互的页面上的元素而改变。

有人知道解决这个问题的方法吗？

Answer 1

这是我最喜欢的方式。它在 S/O 上不起作用，但在 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>