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

<template>
  <div class="label-render-container">
    <!-- 标签预览容器 -->
    <div class="preview-container" :id="hideActions ? undefined : 'label-preview-container'" ref="labelRef">
      <ProductionTagPreview
        v-if="labelType === '2'"
        :content="content"
        :paperWidthMm="100"
        :paperHeightMm="80"
      />
      <OuterTagPreview
        v-if="labelType === '3'"
        :content="content"
        :paperWidthMm="180"
        :paperHeightMm="100"
      />
      <SampleTagPreview v-if="labelType === '4'" :content="content" />
      <ForgeTagPreview v-if="labelType === '5'" :content="content" />
      <SaltSprayTagPreview v-if="labelType === '6'" :content="content" />
    </div>
    <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>
  </div>
</template>

<script>
import domToImage from 'dom-to-image';
import html2canvas from 'html2canvas'; // 高清渲染
import { Message } from 'element-ui';
import { PDFDocument } from 'pdf-lib';

import ProductionTagPreview from './ProductionTagPreview.vue';
import OuterTagPreview from './OuterTagPreview.vue';
import SampleTagPreview from './SampleTagPreview.vue';
import ForgeTagPreview from './ForgeTagPreview.vue';
import SaltSprayTagPreview from './SaltSprayTagPreview.vue';

export default {
  name: 'LabelRender',
  components: {
    ProductionTagPreview,
    OuterTagPreview,
    SampleTagPreview,
    ForgeTagPreview,
    SaltSprayTagPreview,
  },
  props: {
    labelType: {
      type: String,
      required: true,
    },
    content: {
      type: Object,
      required: true,
    },
    hideActions: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    // -------- 图片下载方法（保留，可按需替换为html2canvas） --------
    async downloadLabelAsImage() {
      const labelContainer = this.$refs.labelRef;
      if (!labelContainer) {
        Message.error('未找到标签容器，无法下载');
        return;
      }

      try {
        // 可选：也替换为html2canvas提升下载清晰度
        // const canvas = await html2canvas(labelContainer, { scale: 3, backgroundColor: '#ffffff', allowTaint: true, taintTest: false });
        // const dataUrl = canvas.toDataURL('image/png', 1.0);
        const dataUrl = await domToImage.toPng(labelContainer);
        
        const downloadLink = document.createElement('a');
        downloadLink.href = dataUrl;
        downloadLink.download = `标签_${new Date().getTime()}.png`;
        document.body.appendChild(downloadLink);
        downloadLink.click();
        document.body.removeChild(downloadLink);
      } catch (error) {
        console.error('标签图片下载失败：', error);
        Message.error('标签图片下载失败，请重试');
      }
    },

    // -------- 单张打印：先生成 PDF，再让浏览器打印 --------
    async printLabel() {
      // 1. 获取标签容器DOM
      // 只在当前组件作用域内查找，避免页面上存在多个标签时选错
      const labelContainer = this.$refs.labelRef?.querySelector('.label-container') ||
        this.$refs.labelRef?.querySelector('.material-label-container');
      if (!labelContainer) {
        Message.error('未找到标签容器，无法打印');
        return;
      }

      try {
        Message.info('正在准备打印内容，请稍等...');
        
        // 2. 计算纸张尺寸（与批量导出保持一致）
        // 根据 labelType 判断：'2' 是材料标签（100x80，宽100高80），'3' 是外标（180x100）
        const isMaterial = this.labelType === '2';
        const paperWidthMm = isMaterial ? 100 : 180;
        const paperHeightMm = isMaterial ? 80 : 100;
        
        // 使用合适的scale值生成高清Canvas（但不超过纸张尺寸）
        const canvasScale = 3; // 提高清晰度（单张打印）

        // 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) {
          // 材料标签：设置固定尺寸，确保100mm x 80mm的比例
          wrapper.style.display = 'flex';
          wrapper.style.alignItems = 'center';
          wrapper.style.justifyContent = 'center';
          // 直接设置labelContainer的尺寸为mm单位，确保正确的物理尺寸比例
          labelContainer.style.width = `${paperWidthMm}mm`;
          labelContainer.style.height = `${paperHeightMm}mm`;
        } 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, {
          backgroundColor: '#ffffff',
          scale: 3,
          useCORS: true,
          // 让 html2canvas 为频繁读回优化 Canvas（与批量导出一致）
          willReadFrequently: true,
          // 确保按元素尺寸截图（与批量导出完全一致）
          width: labelContainer.offsetWidth,
          height: labelContainer.offsetHeight,
          windowWidth: labelContainer.scrollWidth,
          windowHeight: labelContainer.scrollHeight,
        });

        // 5. 使用 pdf-lib 生成单页 PDF（占满整张纸，无边距）
        const mmToPt = 72 / 25.4;
        const pageWidthPt = paperWidthMm * mmToPt;
        const pageHeightPt = paperHeightMm * mmToPt;

        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;
        // 直接占满整个PDF页面，不留边距
        // 确保图片按页面尺寸等比缩放，占满整张纸
        const scale = Math.min(pageWidthPt / imgW, pageHeightPt / imgH);
        const drawW = imgW * scale;
        const drawH = imgH * scale;

        // 居中放置（如果图片比例与页面不完全一致）
        const x = (pageWidthPt - drawW) / 2;
        const y = (pageHeightPt - 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);
        }

        // 还原 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('打印内容准备失败，请重试');
      }
    },

    // -------- 辅助方法：等待所有资源加载（图片+字体+二维码） --------
    async waitForAllResources(element) {
      // 等待图片加载
      const images = element.querySelectorAll('img');
      const imgPromises = Array.from(images).map(img => 
        img.complete ? Promise.resolve() : new Promise(resolve => {
          img.onload = resolve;
          img.onerror = resolve;
        })
      );
      await Promise.all(imgPromises);

      // 等待字体加载
      await document.fonts.ready;

      // 等待二维码Canvas渲染
      await this.waitForQRCodeRender(element);

      // 最终等待样式稳定
      await new Promise(resolve => setTimeout(resolve, 300));
    },

    // -------- 辅助方法：等待二维码Canvas渲染完成 --------
    async waitForQRCodeRender(element) {
      const qrCanvasList = element.querySelectorAll('canvas');
      if (qrCanvasList.length === 0) return;

      const qrLoadPromises = Array.from(qrCanvasList).map(canvas => {
        return new Promise(resolve => {
          const checkInterval = setInterval(() => {
            const ctx = canvas.getContext('2d');
            if (!ctx) {
              clearInterval(checkInterval);
              resolve();
              return;
            }
            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            const hasContent = imageData.data.some(value => value !== 0);
            if (hasContent || Date.now() - (ctx.startTime || 0) > 2000) {
              clearInterval(checkInterval);
              resolve();
            }
          }, 100);
        });
      });
      await Promise.all(qrLoadPromises);
    }
  },
};
</script>

<style scoped>

.label-render-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  /* padding: 1rem; */
  box-sizing: border-box;
}

.action-buttons {
  margin-top: 1rem;
}

.preview-container {
  background-color: #fff;
  color: #000;
  /* padding: 1.5rem; */
  width: fit-content;
  /* min-width: 200px; */
  box-shadow: 0 0 60px rgba(255, 255, 255, 0.2);
  /* border: 1px solid rgba(255, 255, 255, 0.1); */
  overflow: hidden;
  transition: all 0.3s ease;
}

.preview-container:hover {
  box-shadow: 0 0 80px rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

/* 强制二维码Canvas可见，避免渲染丢失 */
:deep(canvas) {
  display: block;
  visibility: visible;
  opacity: 1;
}

/* 字体平滑，提升文字清晰度 */
:deep(.preview-container) {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
}
</style>