duxingchen/track
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

打印所见即所得: iframe克隆DOM+全局样式+静默打印

Browse Source
This commit is contained in:
duxingchen
2026-08-06 10:52:29 +08:00
parent 81e41bc38b
commit 1ba44d4b0a
1 changed files with 30 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
frontend/src/pages/admin/CreateProductDialog.tsx
View File

@ -289,57 +289,42 @@ export default function CreateProductDialog({ open, onClose, onCreated }: Props)
// ============================================================
function printCurrentQRCode() {
if (!createdSn) return;
const qrUrl = `/api/v1/products/qrcode/${createdSn}`;
const productName = selected?.material_name ?? "";
const spec = selected?.spec_model ?? "";
const orderNo2 = orderNo || "—";
const printWindow = window.open("", "_blank", "width=420,height=480");
if (!printWindow) return;
printWindow.document.write(`
const printArea = document.getElementById("label-print-area");
if (!printArea) return;
const printContent = printArea.innerHTML;
const styles = Array.from(document.querySelectorAll("style, link[rel=\"stylesheet\"]"))
.map(el => el.outerHTML)
.join("");
const iframe = document.createElement("iframe");
iframe.style.position = "absolute";
iframe.style.width = "0";
iframe.style.height = "0";
iframe.style.border = "none";
document.body.appendChild(iframe);
const doc = iframe.contentWindow!.document;
doc.write(`
<!DOCTYPE html>
<html>
<head>
<title>打印标签 - ${createdSn}</title>
<head><title>打印标签</title>${styles}
<style>
@page { size: auto; margin: 0mm; }
.print-label-container {
display: flex; flex-direction: column; width: 100%; height: 100%;
box-sizing: border-box; padding: 10px; background: #fff;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #000; overflow: hidden;
}
.label-top {
display: flex; flex-direction: row; align-items: flex-start; gap: 12px;
flex: 1; min-height: 0;
}
.qr-box { flex-shrink: 0; width: 50%; }
.qr-box img { width: 100%; height: auto; display: block; }
.info-box { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.info-item { font-size: 14px; font-weight: 900; line-height: 1.15; word-break: break-all; }
.item-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.label-bottom {
flex-shrink: 0; margin-top: 10px; font-size: 18px; font-weight: 900;
text-align: center; border-top: 2px solid #000; padding-top: 6px; letter-spacing: 1px;
}
body { margin: 0; padding: 0; background: #fff; }
.label-preview-box { border: none !important; margin: 0 !important; padding: 0 !important; max-width: none !important; width: 100% !important; height: 100vh !important; }
</style>
</head>
<body style="margin:0;">
<div class="print-label-container">
<div class="label-top">
<div class="qr-box">
<img src="${qrUrl}" onload="window.print(); window.close();" />
</div>
<div class="info-box">
<div class="info-item item-name">名：${productName}</div>
<div class="info-item">规：${spec}</div>
<div class="info-item">单：${orderNo2}</div>
</div>
</div>
<div class="label-bottom">码：${createdSn}</div>
</div>
</body>
<body><div class="label-preview-box">${printContent}</div></body>
</html>
`);
printWindow.document.close();
doc.close();
iframe.contentWindow!.onload = () => {
iframe.contentWindow!.focus();
iframe.contentWindow!.print();
setTimeout(() => { document.body.removeChild(iframe); }, 1000);
};
}
// ============================================================
@ -358,7 +343,7 @@ export default function CreateProductDialog({ open, onClose, onCreated }: Props)
{createdSn ? (
/* ---- 成功页 ---- */
<div className="py-4">
<div className="label-preview-box">
<div id="label-print-area" className="label-preview-box">
<div className="label-top">
<div className="qr-wrapper">
<img src={`/api/v1/products/qrcode/${createdSn}`} alt="QR" className="qr-img" />