Question

我正在尝试创建一个按钮，当按下该按钮时，将打印作为链接添加到代码中的图像。我该怎么办？

下面的代码可打印整个页面，但我希望它仅打印特定的图像。

<a href="javascript:if(window.print)window.print()">Print</a>

Answer 1

一种方法是使用打印@media查询来隐藏所有图像并将仅单击的图像列入白名单。随着一点点的JavaScript，我们可以动态创建打印查询，并将其连接到页面的style标记。

首先，我围绕每个img在button元件中，由于锚定是不是真的有好的语义的选择。按钮做事；锚带我们的地方。

接下来，在JavaScript中，我们将单击处理程序附加到每个按钮，以获取其子图像的ID。然后，我们创建一个新的印刷媒体查询，清除旧的（如果已存在）。在动态代码段中，我们输入imgId变量，其中包含我们要显示的图像的ID。其他所有图像均不显示。

最后，将触发打印事件。我们完成了，只有所需（单击）的图像才能进入打印预览。

const buttons = document.querySelectorAll("button");

function buttonHandler() {
  const imgId = this.querySelector("img").getAttribute("id");

  document.querySelector('style').textContent =
    `@media print {
        img { display: none; }
        #${imgId} { display: block; }
     }`;

  if (window.print) {
    window.print();
  }
}

buttons.forEach(button => {
  button.addEventListener("click", buttonHandler);
});

<button><img id="img1" src="http://placekitten.com/g/200/300" alt=""></button>
<button><img id="img2" src="http://placekitten.com/g/200/200" alt=""></button>
<button><img id="img3" src="http://placekitten.com/g/200/250" alt=""></button>

https://jsfiddle.net/xw2zbL6f/1/

如何打印特定的HTML图像

1 个答案: