如何使用 JavaScript 在网页上打印单张图片？
如何打印网页
在浏览器中，我们可以通过点击菜单打印项来打印整个页面。
或者你可以使用快捷键 Ctrl + P（Command + P） 来打印页面。
在代码中，可以使用 window.print() 方法调用页面打印。
以上 3 种方式，都会打印整个页面。
今天这篇文章将会介绍，如何通过 JavaScript 单独打印网页的中的图片元素？
实现方案
上文提到，window.print() 方法会调用页面打印，但这时候打印的是整个页面。
如果需要在网页中打印单张图片，我们需要借助 iframe 的能力。把图片插入到 iframe 内，然后再调用 iframe 的 print() 方法，这样打印的就是 iframe 的内容，而不是当前页面。
我们先创建 HTML 结构：
<img id="image" src="/path/to/image.jpg" /> <button id="print">打印</button>
我们希望通过点击打印按钮触发页面打印，所以我们需要在按钮上添加 click 事件。
const printBtn = document.getElementById('print');
printBtn.addEventListener('click', function () {
// ...
});
创建 iframe 元素
接下来，我们通过 JavaScript 创建一个 iframe 元素。
const iframe = document.createElement('iframe');
// iframe 不展示在页面
iframe.style.height = 0;
iframe.style.visibility = 'hidden';
iframe.style.width = 0;
// 设置 iframe 内容
iframe.setAttribute('srcdoc', '<html><body></body></html>');
document.body.appendChild(iframe);
我们可以使用 setAttribute 方法，给 iframe 设置初始化文档内容。
上面的代码示例中，我们在新创建的 iframe 内只添加了简单的 html 和 body 元素。
在 iframe 内插入图片
虽然我们刚创建的 iframe 是个简单的 html 内容，而不是 URL 链接。我们仍然需要等待 iframe 加载完成之后，才能再往 iframe 内插入图片元素。
iframe.addEventListener('load', function () {
// 克隆页面的图片元素
const image = document.getElementById('image').cloneNode();
image.style.maxWidth = '100%';
// 把克隆的图片元素添加到 iframe 内
const body = iframe.contentDocument.body;
body.style.textAlign = 'center';
body.appendChild(image);
});
监听 iframe 的 load 事件，在其回调函数中克隆当前页面的图片，然后插入到 iframe 文档内。
打印图片
同样，我们需要等到图片加载完成之后，再去调用 iframe 的 print() 方法，打印出图片。
iframe.addEventListener('load', function () {
// ...
image.addEventListener('load', function () {
iframe.contentWindow.print();
});
});
等到图片加载完成，同样也是监听图片的 load 事件。
在页面中调用 iframe 的 print() 方法，需要使用 iframe.contentWindow 属性。
删除 iframe
打印完成结束后，我们刚创建的 iframe 元素也就没有用了，所以我们要把它删除掉。
iframe.contentWindow.addEventListener('afterprint', function () {
// 通过父级页面删除 iframe 自己
iframe.parentNode.removeChild(iframe);
});
打印完成，即监听 iframe.contentWindow 元素的 afterprint 事件。在回调函数内，通过 iframe.parentNode 也就是父级页面元素移除 iframe 自身。
全文完，如果觉得这篇文章对你有用，欢迎 点赞 👍、评论 ✍️、收藏 👀
转载自:https://juejin.cn/post/7133212338877890574