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.shadowRoot
if (!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);
// 复制待打印元素到iframe
const 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();
// 打印完成后移除iframe
setTimeout(() => {
iframe.contentWindow.focus();
iframe.contentWindow.print();
setTimeout(() => {
document.body.removeChild(iframe);
}, 300);
}, 500);
}
浙公网安备 33010602011771号