如何打印特定HTML图像

问题描述 投票:0回答:1

我试图让一个按钮,按下打印时被添加到代码为链接的图像。我怎样才能做到这一点?

下面的代码打印整个页面,但我想它只打印特定的图像。

<a href="javascript:if(window.print)window.print()">Print</a>
javascript html css printing
1个回答
0
投票

一种方法是使用打印@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/

© www.soinside.com 2019 - 2024. All rights reserved.