更正前端内容

klp-ui/src/views/wms/coil/panels/LabelRender/index.vue

@@ -76,7 +76,8 @@ export default {
     // -------- 重构后的打印方法（核心优化） --------
     async printLabel() {
       // 1. 获取标签容器DOM
-      const labelContainer = document.querySelector('.label-container');
+      const labelContainer = document.querySelector('.label-container') || 
+                            document.querySelector('.material-label-container');
       if (!labelContainer) {
         Message.error('未找到标签容器，无法打印');
         return;
@@ -88,67 +89,149 @@ export default {
         // 2. 等待二维码/字体等资源加载完成（复用之前的等待逻辑）
         await this.waitForAllResources(labelContainer);
 
-        // 3. 用html2canvas生成高清Canvas（解决文字模糊+二维码丢失）
+        // 3. 计算纸张尺寸和缩放比例
+        // 纸张尺寸：180mm x 100mm
+        // 1mm ≈ 3.779527559px (96 DPI)
+        const paperWidthMm = 180;
+        const paperHeightMm = 100;
+        const dpi = 96;
+        const mmToPx = dpi / 25.4;
+        const paperWidthPx = paperWidthMm * mmToPx; // 约 680.3px
+        const paperHeightPx = paperHeightMm * mmToPx; // 约 377.95px
+
+        // 获取标签容器的实际尺寸
+        const containerRect = labelContainer.getBoundingClientRect();
+        const containerWidth = containerRect.width;
+        const containerHeight = containerRect.height;
+
+        // 计算缩放比例，确保内容适配到纸张（留出2mm边距）
+        const marginMm = 2;
+        const marginPx = marginMm * mmToPx;
+        const availableWidth = paperWidthPx - marginPx * 2;
+        const availableHeight = paperHeightPx - marginPx * 2;
+        
+        const scaleX = containerWidth > 0 ? availableWidth / containerWidth : 1;
+        const scaleY = containerHeight > 0 ? availableHeight / containerHeight : 1;
+        const printScale = Math.min(scaleX, scaleY, 1); // 不超过1，不放大
+
+        // 计算最终Canvas尺寸（适配纸张）
+        const finalCanvasWidth = containerWidth * printScale;
+        const finalCanvasHeight = containerHeight * printScale;
+        
+        // 使用合适的scale值生成高清Canvas（但不超过纸张尺寸）
+        const canvasScale = Math.min(1.5, printScale * 1.5); // 确保不超过纸张
+
+        // 4. 用html2canvas生成高清Canvas（解决文字模糊+二维码丢失）
         const canvas = await html2canvas(labelContainer, {
-          scale: 1.5, // 3倍高清渲染（核心）
+          scale: canvasScale,
           backgroundColor: '#ffffff', // 强制白色背景，避免打印时背景透明
           useCORS: true, // 支持跨域图片
           allowTaint: true, // 允许渲染canvas（二维码）
           taintTest: false, // 关闭canvas污染检测
-          windowWidth: labelContainer.offsetWidth * 1.5, // 适配缩放后的宽度
+          width: containerWidth,
-          windowHeight: labelContainer.offsetHeight * 1.5, // 适配缩放后的高度
+          height: containerHeight,
           logging: false,
         });
 
-        // 4. 创建临时打印容器（避免影响原DOM）
+        // 5. 如果Canvas尺寸超出纸张，需要缩放Canvas
+        let finalCanvas = canvas;
+        if (canvas.width > paperWidthPx || canvas.height > paperHeightPx) {
+          // 创建新的Canvas，尺寸适配纸张
+          const scaledCanvas = document.createElement('canvas');
+          scaledCanvas.width = Math.min(canvas.width, paperWidthPx);
+          scaledCanvas.height = Math.min(canvas.height, paperHeightPx);
+          const ctx = scaledCanvas.getContext('2d');
+          ctx.drawImage(canvas, 0, 0, scaledCanvas.width, scaledCanvas.height);
+          finalCanvas = scaledCanvas;
+        }
+
+        // 6. 创建临时打印容器（避免影响原DOM）
         const printContainerId = 'temp-print-container-' + new Date().getTime();
         const tempPrintContainer = document.createElement('div');
         tempPrintContainer.id = printContainerId;
-        // 将高清Canvas插入临时容器
+        tempPrintContainer.style.cssText = 'position: absolute; left: -9999px; top: -9999px;';
-        tempPrintContainer.appendChild(canvas);
+        // 将Canvas插入临时容器
-        // document.body.appendChild(tempPrintContainer);
+        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);
 
-        // 5. 调用printJS打印高清Canvas（而非原HTML）
+        // 7. 调用printJS打印高清Canvas（而非原HTML）
         printJS({
           printable: tempPrintContainer, // 打印临时容器
           type: 'html',
           header: null,
           footer: null,
           scanStyles: false, // 禁用自动扫描样式，手动控制
-          // 自定义打印样式：确保Canvas适配纸张、无多余边距
+          // 自定义打印样式：确保Canvas适配纸张、无多余边距、强制单页
           style: `
+            @page {
+              size: ${paperWidthMm}mm ${paperHeightMm}mm;
+              margin: 0 !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: 100%;
+              width: ${paperWidthMm}mm !important;
-              height: auto;
+              height: ${paperHeightMm}mm !important;
-              margin: 0;
+              margin: 0 !important;
-              padding: 0;
+              padding: 0 !important;
+              display: flex !important;
+              align-items: center !important;
+              justify-content: center !important;
             }
             #${printContainerId} canvas {
-              max-width: 100%;
+              width: ${paperWidthMm}mm !important;
-              height: auto;
+              height: ${paperHeightMm}mm !important;
-              border: none;
+              max-width: ${paperWidthMm}mm !important;
+              max-height: ${paperHeightMm}mm !important;
+              object-fit: contain !important;
+              border: none !important;
             }
             @media print {
-              body * { visibility: hidden; }
+              body * { visibility: hidden !important; }
-              #${printContainerId}, #${printContainerId} * { visibility: visible; }
+              #${printContainerId}, #${printContainerId} * { visibility: visible !important; }
-              #${printContainerId} { position: absolute; top: 0; left: 0; }
+              #${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: () => {
-            // 6. 打印完成后清理临时容器
+            // 8. 打印完成后清理临时容器
+            if (document.body.contains(tempPrintContainer)) {
               document.body.removeChild(tempPrintContainer);
-            Message.success('打印准备完成，请在打印预览中确认打印');
+            }
+            Message.success('打印完成');
           },
           onError: (error) => {
             // 异常时也清理临时容器
+            if (document.body.contains(tempPrintContainer)) {
               document.body.removeChild(tempPrintContainer);
+            }
             console.error('打印失败:', error);
             Message.error('打印失败，请重试');
           }
         });
-
-        // document.removeChild(tempPrintContainer);
       } catch (error) {
         console.error('打印准备失败:', error);
         Message.error('打印内容准备失败，请重试');