export function onClick() {console.log('onClick');const outerContainer = document.querySelector(".labelcode-tag-container");if (!outerContainer) {this.utils.toast({title: '请先展开二维码标签',type: 'error',});return;}const shadowRoot = outerContainer.shadowRootif (!shadowRoot) {this.utils.toast({title: '无妨访问shadow DOM',type: 'error',});return;}const printContainer = shadowRoot.querySelector('#sheet-container');// const printContainer = shadowRoot.querySelector('.tag-container');if (!outerContainer) {this.utils.toast({title: '未找到待打印区域',type: 'error',});return;}// 打印指定区域printElement(printContainer);
}
//打印指定DOM元素
function printElement(element) {// 创建打印 iframe（避免影响原页面样式）const iframe = document.createElement('iframe');iframe.style.position = 'absolute';iframe.style.top = '-9999px';iframe.style.left = '-9999px';iframe.style.width = '100%';iframe.style.height = '100%';iframe.style.zIndex = '9999';document.body.appendChild(iframe);// 复制待打印元素到iframeconst iframeDoc = iframe.contentDocument || iframe.contentWindow.document;// 复制原元素的所有内容（包括子节点）
// iframeDoc.body.appendChild(element.cloneNode(true));iframeDoc.open();// 直接在 iframe 的 <head> 中写样式iframeDoc.write(`<html><head><meta charset="UTF-8"><title>打印预览</title><style>.tag {width: 133px;height: 200px;display: inline-block;background: #0089ff !important;border-radius: 8px !important;box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);}.tag-container{position: relative;height: 100%;width: 100%;background: #0089ff !important;}.tag-header{text-align: center;height: 30px;color: white;}.tag-header-content {padding: 8px 4px 0;}.title {font-size: 10px;line-height: 15px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.tag-body {text-align: center;height: 157px;width: auto;margin: 0 4px;border-radius: 4px;background: white;position: relative;overflow: hidden;}.tag-body-left {width: 100%;position: absolute;top: 78px;left: 0;bottom: 5px;height: 74px;overflow: hidden;}.content, .var3, .var4, .var5, .var6 {font-size: 8px;line-height: 10px;min-height: 10px;height: auto;max-height: 20px;display: block;white-space: normal;overflow: hidden;text-overflow: ellipsis;margin-bottom: 5px;}.bold {font-weight: bold;}.qrcode {width: 67px;height: 67px;position: absolute;left: 33px;top: 37px;}.watermark {font-size: 5px;position: absolute;bottom: 4px;right: 4px;color: #C3C7CA;line-height: 6px;transform: scale(0.42);transform-origin: right bottom;}/* 强制打印背景色（核心代码） */@media print {body, .tag {/* 兼容 Chrome/Safari/Edge */-webkit-print-color-adjust: exact !important;/* 兼容 Firefox/IE */print-color-adjust: exact !important;/* 部分浏览器需要开启背景打印权限，这里强制声明 */background-print: always !important;}}</style></head><body><!-- 待打印内容 -->${element.innerHTML}</body></html>`);iframeDoc.close();// 打印完成后移除iframesetTimeout(() => {iframe.contentWindow.focus();iframe.contentWindow.print();setTimeout(() => {document.body.removeChild(iframe);}, 300);}, 500);
}
