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

Question

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

Item 1  PRINT
Item 2  PRINT

如果单击项目1旁边的打印，我只希望在打印对话框中打开项目1。 同样，如果我单击项目2旁边的，则只希望它打开。

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

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

Answer 1

这是我最喜欢的方式。 这在S / O上不起作用，但在此笔中有效

  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. 在后端创建单独的操作，该操作将在适当的就绪打印视图中呈现所需的项目（类似/print?itemId=123 ）
2. 通过单击链接在单独的窗口中打开该视图，然后调用window.print();

对于小任务来说，这似乎是一项艰巨的工作，但是独立和灵活的屏幕上和同一项目的打印视图将为您带来巨大的好处。