From 732646096fe2ad45916369a78a9229e4b2f9e56c Mon Sep 17 00:00:00 2001
From: 86156 <823267011@qq.com>
Date: Fri, 9 Jan 2026 14:45:22 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=AD=A3=E5=89=8D=E7=AB=AF=E5=86=85?=
 =?UTF-8?q?=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../wms/coil/panels/LabelRender/index.vue     | 155 ++++++++----------
 1 file changed, 68 insertions(+), 87 deletions(-)

diff --git a/klp-ui/src/views/wms/coil/panels/LabelRender/index.vue b/klp-ui/src/views/wms/coil/panels/LabelRender/index.vue
index 7907a17a..9c2d0c9d 100644
--- a/klp-ui/src/views/wms/coil/panels/LabelRender/index.vue
+++ b/klp-ui/src/views/wms/coil/panels/LabelRender/index.vue
@@ -27,7 +27,7 @@
 
 <script>
 import domToImage from 'dom-to-image';
-import printJS from 'print-js';
+// import printJS from 'print-js'; // 改为自建 iframe 打印，避免多余空白页
 import html2canvas from 'html2canvas'; // 新增：引入高清渲染库
 import { Message } from 'element-ui';
 
@@ -157,93 +157,74 @@ export default {
           finalCanvas = scaledCanvas;
         }
 
-        // 6. 创建临时打印容器（避免影响原DOM）
-        const printContainerId = 'temp-print-container-' + new Date().getTime();
-        const tempPrintContainer = document.createElement('div');
-        tempPrintContainer.id = printContainerId;
-        tempPrintContainer.style.cssText = 'position: absolute; left: -9999px; top: -9999px;';
-        // 将Canvas插入临时容器
-        finalCanvas.style.cssText = `width: ${paperWidthMm}mm; height: ${paperHeightMm}mm; max-width: 100%; max-height: 100%; object-fit: contain;`;
-        tempPrintContainer.appendChild(finalCanvas);
-        document.body.appendChild(tempPrintContainer);
+        // 6. 生成 DataURL，使用 printJS 的 image 模式（单图），并减少额外样式以避免隐藏内容
+        const dataUrl = finalCanvas.toDataURL('image/png');
 
-        // 7. 调用printJS打印高清Canvas（而非原HTML）
-        printJS({
-          printable: tempPrintContainer, // 打印临时容器
-          type: 'html',
-          header: null,
-          footer: null,
-          scanStyles: false, // 禁用自动扫描样式，手动控制
-          // 自定义打印样式：确保Canvas适配纸张、无多余边距、强制单页
-          style: `
-            @page {
-              size: ${paperWidthMm}mm ${paperHeightMm}mm;
-              margin: 2mm !important; /* 留出页边距，避免紧贴边框 */
-              padding: 0 !important;
-            }
-            * {
-              -webkit-print-color-adjust: exact !important;
-              print-color-adjust: exact !important;
-            }
-            html, body {
-              margin: 0 !important;
-              padding: 0 !important;
-              width: ${paperWidthMm}mm !important;
-              height: ${paperHeightMm}mm !important;
-              overflow: hidden !important;
-            }
-            #${printContainerId} {
-              width: calc(${paperWidthMm}mm - 4mm) !important; /* 两侧各2mm的页边距后可用宽度 */
-              height: calc(${paperHeightMm}mm - 4mm) !important; /* 上下各2mm的页边距后可用高度 */
-              margin: 0 !important;
-              padding: 0 !important;
-              display: flex !important;
-              align-items: center !important;
-              justify-content: center !important;
-            }
-            #${printContainerId} canvas {
-              width: 100% !important;
-              height: 100% !important;
-              max-width: calc(${paperWidthMm}mm - 4mm) !important;
-              max-height: calc(${paperHeightMm}mm - 4mm) !important;
-              object-fit: contain !important;
-              border: none !important;
-            }
-            @media print {
-              body * { visibility: hidden !important; }
-              #${printContainerId}, #${printContainerId} * { visibility: visible !important; }
-              #${printContainerId} { 
-                position: absolute !important; 
-                top: 0 !important; 
-                left: 0 !important;
-                page-break-inside: avoid !important;
-                break-inside: avoid !important;
-                page-break-after: avoid !important;
-                break-after: avoid !important;
-                page-break-before: avoid !important;
-                break-before: avoid !important;
-                orphans: 999 !important;
-                widows: 999 !important;
-              }
-            }
-          `,
-          printContainer: true,
-          onAfterPrint: () => {
-            // 8. 打印完成后清理临时容器
-            if (document.body.contains(tempPrintContainer)) {
-              document.body.removeChild(tempPrintContainer);
-            }
-            Message.success('打印完成');
-          },
-          onError: (error) => {
-            // 异常时也清理临时容器
-            if (document.body.contains(tempPrintContainer)) {
-              document.body.removeChild(tempPrintContainer);
-            }
-            console.error('打印失败:', error);
-            Message.error('打印失败，请重试');
-          }
-        });
+        // 6. 创建隐藏 iframe 进行打印，避免 printJS 的分页行为
+        const iframe = document.createElement('iframe');
+        iframe.style.position = 'fixed';
+        iframe.style.right = '0';
+        iframe.style.bottom = '0';
+        iframe.style.width = '0';
+        iframe.style.height = '0';
+        iframe.style.border = '0';
+        document.body.appendChild(iframe);
+
+        const doc = iframe.contentWindow.document;
+        doc.open();
+        doc.write(`
+          <!doctype html>
+          <html>
+            <head>
+              <style>
+                @page {
+                  size: ${paperWidthMm}mm ${paperHeightMm}mm;
+                  margin: 2mm;
+                }
+                * {
+                  -webkit-print-color-adjust: exact;
+                  print-color-adjust: exact;
+                  box-sizing: border-box;
+                }
+                html, body {
+                  margin: 0;
+                  padding: 0;
+                  width: 100%;
+                  height: 100%;
+                  overflow: hidden;
+                }
+                body {
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                }
+                img {
+                  width: calc(100% - 4mm);
+                  height: calc(100% - 4mm);
+                  object-fit: contain;
+                  display: block;
+                  page-break-after: avoid;
+                  page-break-before: avoid;
+                  page-break-inside: avoid;
+                }
+              </style>
+            </head>
+            <body>
+              <img src="${dataUrl}" />
+            </body>
+          </html>
+        `);
+        doc.close();
+
+        iframe.onload = () => {
+          setTimeout(() => {
+            iframe.contentWindow.focus();
+            iframe.contentWindow.print();
+            setTimeout(() => {
+              document.body.removeChild(iframe);
+            }, 1000);
+          }, 300);
+        };
       } catch (error) {
         console.error('打印准备失败:', error);
         Message.error('打印内容准备失败，请重试');