window.print()打印window.print() 使用内联框架元素iframe，保留 DOM 元素的事件监听

window.print() 使用内联框架元素iframe，保留 DOM 元素的事件监听，实现打印

    goPrint() {
        // 打印前隐藏 header 和 footer
        window.onbeforeprint = function () {
            let header = document.getElementsByTagName("header")[0];
            let footer = document.getElementsByTagName("footer")[0];
            if (header) header.style.display = "none";
            if (footer) footer.style.display = "none";
        }

        // 打印后恢复 header 和 footer
        window.onafterprint = function () {
            let header = document.getElementsByTagName("header")[0];
            let footer = document.getElementsByTagName("footer")[0];
            if (header) header.style.display = "block";
            if (footer) footer.style.display = "block";
        }

        // 获取要打印的内容
        let oldStr = document.getElementById("print");
        let newStr = document.createElement('IFRAME');
        document.body.appendChild(newStr);
        let doc = newStr.contentWindow.document;

        // 打开文档写入基础结构
        doc.open();
        doc.write('<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"></head><body style="zoom: 0.92;"><div id="printchart">' + oldStr.innerHTML + '</div></body></html>');
        doc.close();

        // 克隆样式到 iframe 中
        let head = doc.head;
        let styles = document.querySelectorAll('style, link[rel="stylesheet"]');
        styles.forEach(function (style) {
            if (style.tagName.toLowerCase() === 'link') {
                let href = style.getAttribute('href');
                let newLink = doc.createElement('link');
                newLink.rel = 'stylesheet';
                newLink.href = href;
                head.appendChild(newLink);
            } else {
                head.appendChild(style.cloneNode(true));
            }
        });

        // 为 iframe 添加属性，隐藏 iframe
        newStr.setAttribute('id', 'printIframe');
        newStr.setAttribute('frameborder', '0');
        newStr.setAttribute('style', 'position:absolute;width:0;height:0;left:-500px;top:-500px;');

        setTimeout(() => {
            newStr.contentWindow.focus();
            newStr.contentWindow.print();
            // 移除 iframe
            document.body.removeChild(newStr);
        }, 500); // 延迟 500ms 确保 iframe 加载完毕
    }

// css
@media print {
  @page {
    margin: 0.25cm;
  }

  body {
    margin: 0;
    font-size: 12px;
    color: #000;
    font-weight: 300;
  }

  .receiptsItem {
    page-break-after: always;
  }
}