当前位置：网站首页>js点击图片打印图像

js点击图片打印图像

2022-07-26 20:31:00 【紫微前端】

您可以通过单击浏览器的打印菜单或按下快捷方式Ctrl+P（或command+P在 macOS 上）来打印网页。调用该window.print()函数提供了打印整个页面的相同结果。
为了打印图像，我们可以将图像元素插入到假元素中，并在 iframe 的窗口上iframe调用该函数。print()假设页面有一个图像元素和一个打印按钮，如下所示：
<img id="image" src="/path/to/image.jpg" /> <button id="print">Print</button>

打印图像可以在按钮的 click事件中处理： 
// Query the element
const printBtn = document.getElementById('print');

printBtn.addEventListener('click', function() {
    ...
});

创建一个假的 iframe

// Create a fake iframe
const iframe = document.createElement('iframe');

// Make it hidden
iframe.style.height = 0;
iframe.style.visibility = 'hidden';
iframe.style.width = 0;

// Set the iframe's source
iframe.setAttribute('srcdoc', '<html><body></body></html>');

document.body.appendChild(iframe);

当 iframe 准备好时插入图像

尽管 iframe 源是一个简单的 HTML，而不是src属性定义的远程路径，但我们必须等待 iframe 完全加载：
iframe.addEventListener('load', function () {
    // Clone the image
    const image = document.getElementById('image').cloneNode();
    image.style.maxWidth = '100%';

    // Append the image to the iframe's body
    const body = iframe.contentDocument.body;
    body.style.textAlign = 'center';
    body.appendChild(image);
});

print()加载图像后立即调用 iframe 窗口上的函数： 
iframe.addEventListener('load', function() {
    ...
    image.addEventListener('load', function() {
        // Invoke the print when the image is ready
        iframe.contentWindow.print();
    });
});


删除 iframe

当用户开始打印图像或关闭打印窗口时，动态 iframe 将被删除
  
iframe.contentWindow.addEventListener('afterprint', function () {
    iframe.parentNode.removeChild(iframe);
});

原网站

版权声明
本文为[紫微前端]所创，转载请带上原文链接，感谢
https://liuhao.blog.csdn.net/article/details/125988265

边栏推荐

猜你喜欢

随机推荐