From bea816fd03e20c639cdffa3d88fffa7a4add4193 Mon Sep 17 00:00:00 2001
From: 86156 <823267011@qq.com>
Date: Fri, 9 Jan 2026 12:00:38 +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

---
 .../panels/LabelRender/OuterTagPreview.vue    | 160 +++++++++++-------
 .../LabelRender/ProductionTagPreview.vue      | 125 +++++++++++---
 2 files changed, 202 insertions(+), 83 deletions(-)

diff --git a/klp-ui/src/views/wms/coil/panels/LabelRender/OuterTagPreview.vue b/klp-ui/src/views/wms/coil/panels/LabelRender/OuterTagPreview.vue
index df6288e8..eb87ba8f 100644
--- a/klp-ui/src/views/wms/coil/panels/LabelRender/OuterTagPreview.vue
+++ b/klp-ui/src/views/wms/coil/panels/LabelRender/OuterTagPreview.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="label-container">
+  <div class="label-container" :style="{ '--print-scale': printScale }">
     <!-- 顶部公司信息 -->
     <div class="company-header">
       <img :src="logo" alt="Company Logo" class="company-logo" />
@@ -152,9 +152,59 @@ export default {
   data() {
     return {
       logo,
+      printScale: 1,
     }
   },
+  mounted() {
+    // 监听打印事件，计算缩放比例
+    window.addEventListener('beforeprint', this.calculatePrintScale);
+    window.addEventListener('afterprint', this.resetPrintScale);
+    // 计算初始缩放比例
+    this.$nextTick(() => {
+      this.calculatePrintScale();
+    });
+  },
+  beforeDestroy() {
+    window.removeEventListener('beforeprint', this.calculatePrintScale);
+    window.removeEventListener('afterprint', this.resetPrintScale);
+  },
   methods: {
+    calculatePrintScale() {
+      this.$nextTick(() => {
+        const container = this.$el;
+        if (!container) return;
+        
+        // 纸张尺寸：180mm x 100mm
+        // 1mm ≈ 3.779527559px (96 DPI)
+        const paperWidth = 180 * 3.779527559; // 约 680.3px
+        const paperHeight = 100 * 3.779527559; // 约 377.95px
+        
+        // 获取内容实际尺寸
+        const rect = container.getBoundingClientRect();
+        const contentWidth = rect.width;
+        const contentHeight = rect.height;
+        
+        // 计算缩放比例（留出2mm边距）
+        const margin = 2 * 3.779527559; // 约 7.56px
+        const availableWidth = paperWidth - margin * 2;
+        const availableHeight = paperHeight - margin * 2;
+        
+        const scaleX = availableWidth / contentWidth;
+        const scaleY = availableHeight / contentHeight;
+        
+        // 取较小的缩放比例，确保内容完全适配
+        this.printScale = Math.min(scaleX, scaleY, 1); // 不超过1，不放大
+        
+        // 设置CSS变量
+        container.style.setProperty('--print-scale', this.printScale);
+      });
+    },
+    resetPrintScale() {
+      this.printScale = 1;
+      if (this.$el) {
+        this.$el.style.setProperty('--print-scale', 1);
+      }
+    }
   }
 }
 </script>
@@ -285,85 +335,81 @@ export default {
     print-color-adjust: exact;
   }
 
-  body {
-    margin: 0;
-    padding: 0;
+  html, body {
+    margin: 0 !important;
+    padding: 0 !important;
+    width: 180mm;
+    height: 100mm;
+    overflow: hidden;
+  }
+
+  /* 隐藏所有其他内容，只显示标签 */
+  body > *:not(.label-container) {
+    display: none !important;
   }
 
   .label-container {
-    width: 180mm;
-    height: 100mm;
-    max-width: 180mm;
-    max-height: 100mm;
-    padding: 2mm;
-    margin: 0;
-    page-break-inside: avoid;
-    break-inside: avoid;
-    page-break-after: avoid;
-    break-after: avoid;
-    page-break-before: avoid;
-    break-before: avoid;
-    overflow: hidden;
-    box-sizing: border-box;
-    font-size: 10px;
-    transform-origin: top left;
+    /* 使用固定纸张尺寸 */
+    width: 180mm !important;
+    height: 100mm !important;
+    max-width: 180mm !important;
+    max-height: 100mm !important;
+    padding: 2mm !important;
+    margin: 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;
+    
+    /* 确保内容不溢出 */
+    overflow: hidden !important;
+    box-sizing: border-box !important;
+    
+    /* 应用动态缩放 */
+    transform: scale(var(--print-scale, 1)) !important;
+    transform-origin: top left !important;
+    
+    /* 计算缩放后的实际占用空间，确保不超出纸张 */
+    position: relative !important;
   }
 
+  /* 打印时调整字体和间距，使用相对单位自动缩放 */
   .company-header {
-    margin-bottom: 1mm;
+    margin-bottom: 0.3em;
   }
 
   .company-logo {
-    width: 12mm;
-    height: 12mm;
-    margin-right: 2mm;
-  }
-
-  .company-name {
-    font-size: 2.5mm;
-  }
-
-  .title {
-    font-size: 5mm;
-  }
-
-  .english-name {
-    font-size: 1.5mm;
+    width: 4em;
+    height: 4em;
+    margin-right: 0.5em;
   }
 
   .info-grid {
-    margin-bottom: 1mm;
+    margin-bottom: 0.5em;
   }
 
   .info-grid-item {
-    padding: 0.5mm;
-    font-size: 2.2mm;
-    height: 5mm;
-    min-height: 5mm;
+    padding: 0.1em;
+    font-size: 1.05em;
+    height: 2em;
   }
 
   .footer-info {
-    font-size: 1.8mm;
-    margin-top: 1mm;
-  }
-
-  .address {
-    font-size: 1.8mm;
-  }
-
-  .english-address {
-    font-size: 1.6mm;
-  }
-
-  .contact-timestamp {
-    font-size: 1.8mm;
+    font-size: 0.7em;
+    margin-top: 0.3em;
   }
 
   /* 确保二维码在打印时正确显示 */
   .contact-timestamp img,
   .contact-timestamp canvas {
-    max-width: 15mm;
-    max-height: 15mm;
+    width: 15mm !important;
+    height: 15mm !important;
+    max-width: 15mm !important;
+    max-height: 15mm !important;
   }
 }
 </style>
\ No newline at end of file
diff --git a/klp-ui/src/views/wms/coil/panels/LabelRender/ProductionTagPreview.vue b/klp-ui/src/views/wms/coil/panels/LabelRender/ProductionTagPreview.vue
index b7f8abac..1f5dd249 100644
--- a/klp-ui/src/views/wms/coil/panels/LabelRender/ProductionTagPreview.vue
+++ b/klp-ui/src/views/wms/coil/panels/LabelRender/ProductionTagPreview.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="material-label-container">
+  <div class="material-label-container" :style="{ '--print-scale': printScale }">
     <table class="material-label-table">
       <!-- 调整第一行结构，使label和value各占2列（等宽） -->
       <tr>
@@ -83,6 +83,62 @@ export default {
         qrcodeRecordId: '',
       })
     }
+  },
+  data() {
+    return {
+      printScale: 1,
+    }
+  },
+  mounted() {
+    // 监听打印事件，计算缩放比例
+    window.addEventListener('beforeprint', this.calculatePrintScale);
+    window.addEventListener('afterprint', this.resetPrintScale);
+    // 计算初始缩放比例
+    this.$nextTick(() => {
+      this.calculatePrintScale();
+    });
+  },
+  beforeDestroy() {
+    window.removeEventListener('beforeprint', this.calculatePrintScale);
+    window.removeEventListener('afterprint', this.resetPrintScale);
+  },
+  methods: {
+    calculatePrintScale() {
+      this.$nextTick(() => {
+        const container = this.$el;
+        if (!container) return;
+        
+        // 纸张尺寸：180mm x 100mm
+        // 1mm ≈ 3.779527559px (96 DPI)
+        const paperWidth = 180 * 3.779527559; // 约 680.3px
+        const paperHeight = 100 * 3.779527559; // 约 377.95px
+        
+        // 获取内容实际尺寸
+        const rect = container.getBoundingClientRect();
+        const contentWidth = rect.width;
+        const contentHeight = rect.height;
+        
+        // 计算缩放比例（留出2mm边距）
+        const margin = 2 * 3.779527559; // 约 7.56px
+        const availableWidth = paperWidth - margin * 2;
+        const availableHeight = paperHeight - margin * 2;
+        
+        const scaleX = availableWidth / contentWidth;
+        const scaleY = availableHeight / contentHeight;
+        
+        // 取较小的缩放比例，确保内容完全适配
+        this.printScale = Math.min(scaleX, scaleY, 1); // 不超过1，不放大
+        
+        // 设置CSS变量
+        container.style.setProperty('--print-scale', this.printScale);
+      });
+    },
+    resetPrintScale() {
+      this.printScale = 1;
+      if (this.$el) {
+        this.$el.style.setProperty('--print-scale', 1);
+      }
+    }
   }
 }
 </script>
@@ -147,41 +203,56 @@ export default {
     print-color-adjust: exact;
   }
 
-  body {
-    margin: 0;
-    padding: 0;
+  html, body {
+    margin: 0 !important;
+    padding: 0 !important;
+    width: 180mm;
+    height: 100mm;
+    overflow: hidden;
+  }
+
+  /* 隐藏所有其他内容，只显示标签 */
+  body > *:not(.material-label-container) {
+    display: none !important;
   }
 
   .material-label-container {
-    width: 180mm;
-    height: 100mm;
-    max-width: 180mm;
-    max-height: 100mm;
-    padding: 2mm;
-    margin: 0;
-    page-break-inside: avoid;
-    break-inside: avoid;
-    page-break-after: avoid;
-    break-after: avoid;
-    page-break-before: avoid;
-    break-before: avoid;
-    overflow: hidden;
-    box-sizing: border-box;
-    font-size: 10px;
-    transform-origin: top left;
+    /* 使用固定纸张尺寸 */
+    width: 180mm !important;
+    height: 100mm !important;
+    max-width: 180mm !important;
+    max-height: 100mm !important;
+    padding: 2mm !important;
+    margin: 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;
+    
+    /* 确保内容不溢出 */
+    overflow: hidden !important;
+    box-sizing: border-box !important;
+    
+    /* 应用动态缩放 */
+    transform: scale(var(--print-scale, 1)) !important;
+    transform-origin: top left !important;
+    
+    /* 计算缩放后的实际占用空间，确保不超出纸张 */
+    position: relative !important;
   }
 
   .material-label-table {
     width: 100%;
     height: 100%;
-    font-size: 2.5mm;
   }
 
   .material-label-table td {
-    padding: 1mm;
-    font-size: 2.5mm;
+    padding: 0;
     height: auto;
-    min-height: 8mm;
   }
 
   .label-cell {
@@ -192,8 +263,10 @@ export default {
   /* 确保二维码在打印时正确显示 */
   .value-cell img,
   .value-cell canvas {
-    max-width: 10mm;
-    max-height: 10mm;
+    width: 10mm !important;
+    height: 10mm !important;
+    max-width: 10mm !important;
+    max-height: 10mm !important;
   }
 }
 </style>
\ No newline at end of file