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

Printing different part of page depending on clicked element

本文关键字：同部 打印 单击 元素      更新时间：2023-09-26

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

Item 1  PRINT
Item 2  PRINT

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

我知道<a href="javascript:window.print()">，以及如何将一个名为noprint的类添加到我不想打印的任何元素中，但我想要的是一种聪明、动态的方法，可以根据用户与页面上的哪个元素进行交互来更改它。

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

这是我最喜欢的方法。它在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>

  1. 在后端创建单独的操作，该操作将在适当的准备打印视图中呈现所需项目（类似于/print?itemId=123）
  2. 单击链接，在单独的窗口中打开该视图，然后调用window.print();

对于小任务来说，这似乎是一项艰巨的任务，但您将从相同项目的独立、灵活的屏幕和打印视图中获得显著的好处。

相关文章：