我试图让一个按钮,按下打印时被添加到代码为链接的图像。我怎样才能做到这一点?
下面的代码打印整个页面,但我想它只打印特定的图像。
<a href="javascript:if(window.print)window.print()">Print</a>
一种方法是使用打印@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>