更正前端内容

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

@@ -1,7 +1,7 @@
 <template>
   <div class="label-render-container">
     <!-- 标签预览容器 -->
-    <div class="preview-container" id="label-preview-container" ref="labelRef">
+    <div class="preview-container" :id="hideActions ? undefined : 'label-preview-container'" ref="labelRef">
       <ProductionTagPreview
         v-if="labelType === '2'"
         :content="content"
@@ -18,7 +18,7 @@
       <ForgeTagPreview v-if="labelType === '5'" :content="content" />
       <SaltSprayTagPreview v-if="labelType === '6'" :content="content" />
     </div>
-    <div class="action-buttons">
+    <div class="action-buttons" v-if="!hideActions">
       <el-button type="primary" @click="downloadLabelAsImage">下载标签图片</el-button>
       <el-button type="primary" @click="printLabel" style="margin-left: 10px;">打印标签</el-button>
     </div>
@@ -27,9 +27,9 @@
 
 <script>
 import domToImage from 'dom-to-image';
-// import printJS from 'print-js'; // 改为自建 iframe 打印，避免多余空白页
-import html2canvas from 'html2canvas'; // 新增：引入高清渲染库
+import html2canvas from 'html2canvas'; // 高清渲染
 import { Message } from 'element-ui';
+import { PDFDocument } from 'pdf-lib';
 
 import ProductionTagPreview from './ProductionTagPreview.vue';
 import OuterTagPreview from './OuterTagPreview.vue';
@@ -55,11 +55,15 @@ export default {
       type: Object,
       required: true,
     },
+    hideActions: {
+      type: Boolean,
+      default: false,
+    },
   },
   methods: {
     // -------- 图片下载方法（保留，可按需替换为html2canvas） --------
     async downloadLabelAsImage() {
-      const labelContainer = document.getElementById('label-preview-container');
+      const labelContainer = this.$refs.labelRef;
       if (!labelContainer) {
         Message.error('未找到标签容器，无法下载');
         return;
@@ -83,11 +87,12 @@ export default {
       }
     },
 
-    // -------- 重构后的打印方法（核心优化） --------
+    // -------- 单张打印：先生成 PDF，再让浏览器打印 --------
     async printLabel() {
       // 1. 获取标签容器DOM
-      const labelContainer = document.querySelector('.label-container') || 
-                            document.querySelector('.material-label-container');
+      // 只在当前组件作用域内查找，避免页面上存在多个标签时选错
+      const labelContainer = this.$refs.labelRef?.querySelector('.label-container') ||
+        this.$refs.labelRef?.querySelector('.material-label-container');
       if (!labelContainer) {
         Message.error('未找到标签容器，无法打印');
         return;
@@ -96,137 +101,128 @@ export default {
       try {
         Message.info('正在准备打印内容，请稍等...');
         
-        // 2. 等待二维码/字体等资源加载完成（复用之前的等待逻辑）
-        await this.waitForAllResources(labelContainer);
-
-        // 3. 计算纸张尺寸和缩放比例
-        // 根据标签类型设置纸张尺寸：
-        // 产品码：100mm x 180mm（横向，原先180x100）
-        // 原料码：80mm x 100mm（竖向）
-        const isMaterial = labelContainer.classList.contains('material-label-container');
+        // 2. 计算纸张尺寸（与批量导出保持一致）
+        // 根据 labelType 判断：'2' 是材料标签（100x80），'3' 是外标（180x100）
+        const isMaterial = this.labelType === '2';
         const paperWidthMm = isMaterial ? 100 : 180;
         const paperHeightMm = isMaterial ? 80 : 100;
-        const dpi = 96;
-        const mmToPx = dpi / 25.4;
-        const paperWidthPx = paperWidthMm * mmToPx;
-        const paperHeightPx = paperHeightMm * mmToPx;
-
-        // 获取标签容器的实际尺寸
-        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(2, printScale * 2); // 适当提高清晰度
+        const canvasScale = 3; // 提高清晰度（单张打印）
 
-        // 4. 用html2canvas生成高清Canvas（解决文字模糊+二维码丢失）
-        // 注意：不再强制指定 width/height，避免裁掉最右/最下边框
+        // 3. 为单张打印临时创建一个与批量打印完全一致的隐藏容器
+        //    完全模拟批量打印的 .batch-pdf-page 容器
+        const originalParent = labelContainer.parentNode;
+        const originalNext = labelContainer.nextSibling;
+        const wrapper = document.createElement('div');
+        wrapper.style.position = 'fixed';
+        wrapper.style.left = '-100000px'; // 与批量打印一致
+        wrapper.style.top = '0';
+        wrapper.style.width = `${paperWidthMm}mm`; // 固定尺寸，与批量打印的 .batch-pdf-page 一致
+        wrapper.style.height = `${paperHeightMm}mm`;
+        wrapper.style.boxSizing = 'border-box';
+        wrapper.style.backgroundColor = '#ffffff';
+        wrapper.style.overflow = 'hidden'; // 与批量打印的 .batch-pdf-page 一致
+        
+        // 根据标签类型设置不同的布局方式
+        if (isMaterial) {
+          // 材料标签：填充 wrapper
+          wrapper.style.display = 'flex';
+          wrapper.style.alignItems = 'center';
+          wrapper.style.justifyContent = 'center';
+          labelContainer.style.width = '100%';
+          labelContainer.style.height = '100%';
+        } else {
+          // 成品标签：直接放在 wrapper 中，保持原始布局（与批量打印一致）
+          wrapper.style.display = 'block';
+          wrapper.style.padding = '0';
+          // 不修改 labelContainer 的样式，保持 fit-content（与批量打印一致）
+        }
+        wrapper.appendChild(labelContainer);
+        document.body.appendChild(wrapper);
+
+        // 4. 等待二维码/字体等资源加载完成（与批量打印一致）
+        await this.waitForAllResources(labelContainer);
+        
+        // 等待布局稳定（与批量打印一致）
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        // 5. 用html2canvas生成高清Canvas（与批量导出完全一致）
+        // 关键：直接截图 labelContainer，与批量打印完全一致
         const canvas = await html2canvas(labelContainer, {
-          scale: canvasScale,
-          backgroundColor: '#ffffff', // 强制白色背景，避免打印时背景透明
-          useCORS: true, // 支持跨域图片
-          allowTaint: true, // 允许渲染canvas（二维码）
-          taintTest: false, // 关闭canvas污染检测
-          logging: false,
+          backgroundColor: '#ffffff',
+          scale: 3,
+          useCORS: true,
+          // 让 html2canvas 为频繁读回优化 Canvas（与批量导出一致）
+          willReadFrequently: true,
+          // 确保按元素尺寸截图（与批量导出完全一致）
+          width: labelContainer.offsetWidth,
+          height: labelContainer.offsetHeight,
+          windowWidth: labelContainer.scrollWidth,
+          windowHeight: labelContainer.scrollHeight,
         });
 
-        // 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;
+        // 5. 使用 pdf-lib 生成单页 PDF（与批量导出完全一致）
+        const mmToPt = 72 / 25.4;
+        const pageWidthPt = paperWidthMm * mmToPt;
+        const pageHeightPt = paperHeightMm * mmToPt;
+        
+        // 边距：与批量导出保持一致
+        // 材料标签（100x80）：左右2mm，上下0.5mm
+        // 成品标签（180x100）：左右4mm，上下0.5mm
+        const marginXmm = isMaterial ? 2 : 4;
+        const marginYmm = 0.5; // 上下对称边距（不裁切前提下尽量贴边）
+        const marginXPt = marginXmm * mmToPt;
+        const marginYPt = marginYmm * mmToPt;
+        const contentWidthPt = pageWidthPt - marginXPt * 2;
+        const contentHeightPt = pageHeightPt - marginYPt * 2;
+
+        const pdfDoc = await PDFDocument.create();
+        const imgPng = await pdfDoc.embedPng(canvas.toDataURL('image/png'));
+        const page = pdfDoc.addPage([pageWidthPt, pageHeightPt]);
+
+        const imgW = imgPng.width;
+        const imgH = imgPng.height;
+        // 标准适配：确保完整显示且不变形（在内容区域内等比缩放，与批量导出完全一致）
+        const scale = Math.min(contentWidthPt / imgW, contentHeightPt / imgH);
+        const drawW = imgW * scale;
+        const drawH = imgH * scale;
+
+        // 内容区域内居中 + 外层边距（上下对称，与批量导出完全一致）
+        const x = marginXPt + (contentWidthPt - drawW) / 2;
+        const y = marginYPt + (contentHeightPt - drawH) / 2;
+
+        page.drawImage(imgPng, { x, y, width: drawW, height: drawH });
+
+        const pdfBytes = await pdfDoc.save();
+        const blob = new Blob([pdfBytes], { type: 'application/pdf' });
+        const url = URL.createObjectURL(blob);
+
+        const win = window.open(url, '_blank');
+        if (!win) {
+          const a = document.createElement('a');
+          a.href = url;
+          a.download = `标签_${new Date().getTime()}.pdf`;
+          document.body.appendChild(a);
+          a.click();
+          document.body.removeChild(a);
         }
 
-        // 6. 生成 DataURL，使用 printJS 的 image 模式（单图），并减少额外样式以避免隐藏内容
-        const dataUrl = finalCanvas.toDataURL('image/png');
-
-        // 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;
-                  background: #ffffff;
-                }
-                img {
-                  /* 稍微缩小一点，避免被打印机物理不可打印区域裁掉边框 */
-                  width: 94%;
-                  height: auto;
-                  max-height: 94%;
-                  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);
-        };
+        // 还原 DOM 结构
+        // 恢复 labelContainer 的原始样式（如果之前修改过）
+        if (isMaterial) {
+          labelContainer.style.width = '';
+          labelContainer.style.height = '';
+        }
+        // 成品标签不需要恢复，因为没有修改样式
+        if (originalParent) {
+          if (originalNext) {
+            originalParent.insertBefore(labelContainer, originalNext);
+          } else {
+            originalParent.appendChild(labelContainer);
+          }
+        }
+        document.body.removeChild(wrapper);
       } catch (error) {
         console.error('打印准备失败:', error);
         Message.error('打印内容准备失败，请重试');
@@ -285,6 +281,7 @@ export default {
 </script>
 
 <style scoped>
+
 .label-render-container {
   width: 100%;
   display: flex;