当前位置：网站首页>JS click the picture to print the image

JS click the picture to print the image

2022-07-26 21:26:00 【Ziwei front end】

You can print by clicking the browser Menu or press shortcut Ctrl+P（ or command+P stay macOS On ） To print web pages . Call the window.print() The function provides the same result of printing the entire page .
To print an image , We can insert image elements into false elements , And in iframe On the window of iframe Call this function .print() Suppose the page has an image element and a print button , As shown below ：
<img id="image" src="/path/to/image.jpg" /> <button id="print">Print</button>

The print image can be in the... Of the button click Deal with in the event ： 
// Query the element
const printBtn = document.getElementById('print');

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

Create a fake 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);

When iframe Insert image when ready

Even though iframe Source is a simple HTML, instead of src Property defines the remote path , But we have to wait iframe Full load ：
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() Call immediately after loading the image iframe Functions on Windows ： 
iframe.addEventListener('load', function() {
    ...
    image.addEventListener('load', function() {
        // Invoke the print when the image is ready
        iframe.contentWindow.print();
    });
});


Delete iframe

When the user starts printing an image or closes the print window , dynamic iframe place it on clipboard
  
iframe.contentWindow.addEventListener('afterprint', function () {
    iframe.parentNode.removeChild(iframe);
});

原网站

版权声明
本文为[Ziwei front end]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/207/202207262031227075.html

边栏推荐

猜你喜欢

随机推荐