预览尺寸和纸张尺寸不一致问题

src/views/modules/labelSetting/components/ZPLPreview.vue

@@ -144,10 +144,16 @@ export default {
     },
     // 转换为Labelary API需要的dpmm值
     labelaryDpmm() {
-      // DPI转换为dpmm (dots per millimeter)
-      // 1英寸 = 25.4毫米，所以 dpmm = dpi / 25.4
-      const dpmm = Math.round(this.selectedDPI / 25.4)
-      return dpmm
+      // Labelary API 支持的标准 dpmm 值，确保使用正确的映射
+      const dpiToDpmm = {
+        152: 6,   // 152 DPI = 6 dpmm
+        203: 8,   // 203 DPI = 8 dpmm (最常用)
+        300: 12,  // 300 DPI = 12 dpmm
+        600: 24   // 600 DPI = 24 dpmm
+      }
+
+      // 直接使用标准映射，避免计算误差
+      return dpiToDpmm[this.selectedDPI] || 8 // 默认使用8dpmm (203 DPI)
     }
   },
   watch: {
@@ -201,89 +207,45 @@ export default {
   methods: {
     /**
      * 根据纸张类型和方向计算Labelary API需要的尺寸格式
-     * Labelary API格式: {width}x{height} (单位: 英寸，保留1位小数)
+     * 关键：确保尺寸计算的精确性，避免预览图尺寸不匹配
      */
     getLabelarySize() {
-      let size
+      let widthMm, heightMm, paperName = '未知纸张'
 
-      // 优先使用纸张ID
+      // 优先使用纸张ID获取精确的毫米尺寸
       if (typeof this.selectedPaper === 'number') {
         const paper = dynamicPaperConfig.getPaperById(this.selectedPaper)
         if (paper) {
-          // 从毫米转换为英寸
-          size = {
-            width: Math.round((paper.widthMm / 25.4) * 10) / 10,
-            height: Math.round((paper.heightMm / 25.4) * 10) / 10
-          }
+          widthMm = paper.widthMm
+          heightMm = paper.heightMm
+          paperName = paper.name
         }
       }
 
-      // 降级处理
-      if (!size) {
-        // 纸张尺寸映射表（兼容旧格式）
-        const paperSizeMap = {
-          // 毫米制纸张 (毫米 -> 英寸)
-          '40x30': { width: 1.6, height: 1.2 },   // 40mm x 30mm
-          '50x30': { width: 2.0, height: 1.2 },   // 50mm x 30mm
-          '60x40': { width: 2.4, height: 1.6 },   // 60mm x 40mm
-          '80x60': { width: 3.1, height: 2.4 },   // 80mm x 60mm
-          '100x80': { width: 3.9, height: 3.1 },  // 100mm x 80mm
-          '100x25': { width: 3.9, height: 1.0 },  // 100mm x 25mm (条码标签)
-          '80x25': { width: 3.1, height: 1.0 },   // 80mm x 25mm (条码标签)
-          '57x30': { width: 2.2, height: 1.2 },   // 57mm x 30mm (热敏纸)
-          '80x50': { width: 3.1, height: 2.0 },   // 80mm x 50mm (热敏纸)
-
-          // 英寸制纸张 (直接使用英寸值)
-          '4x6': { width: 4.0, height: 6.0 },     // 4×6英寸
-          '4x4': { width: 4.0, height: 4.0 },     // 4×4英寸
-          '4x2': { width: 4.0, height: 2.0 },     // 4×2英寸
-          '3x2': { width: 3.0, height: 2.0 },     // 3×2英寸
-          '2x4': { width: 2.0, height: 4.0 },     // 2×4英寸
-          '2x3': { width: 2.0, height: 3.0 },     // 2×3英寸
-          '2x1': { width: 2.0, height: 1.0 },     // 2×1英寸
-          '6x4': { width: 6.0, height: 4.0 }      // 6×4英寸
-        }
-
-        if (this.selectedPaper === 'custom') {
-          // 自定义尺寸：从画布尺寸的物理信息获取英寸值
-          if (this.canvasSize.widthMm && this.canvasSize.heightMm) {
-            // 从毫米转换为英寸
-            size = {
-              width: Math.round((this.canvasSize.widthMm / 25.4) * 10) / 10,
-              height: Math.round((this.canvasSize.heightMm / 25.4) * 10) / 10
-            }
-          } else {
-            // 降级：使用像素转英寸 (203DPI)
-            const dpi = 203
-            size = {
-              width: Math.round((this.canvasSize.width / dpi) * 10) / 10,
-              height: Math.round((this.canvasSize.height / dpi) * 10) / 10
-            }
-          }
+      // 降级处理：从画布尺寸获取物理尺寸
+      if (!widthMm || !heightMm) {
+        if (this.canvasSize.widthMm && this.canvasSize.heightMm) {
+          widthMm = this.canvasSize.widthMm
+          heightMm = this.canvasSize.heightMm
+          paperName = this.canvasSize.name || '画布尺寸'
         } else {
-          // 标准纸张尺寸
-          size = paperSizeMap[this.selectedPaper] || paperSizeMap['4x2']
+          // 最后降级：使用像素转换（基于203 DPI）
+          widthMm = Math.round((this.canvasSize.width / 203 * 25.4) * 100) / 100
+          heightMm = Math.round((this.canvasSize.height / 203 * 25.4) * 100) / 100
+          paperName = '像素转换'
         }
       }
 
       // 横向打印时交换宽高
       if (this.orientation === 'landscape') {
-        const temp = size.width
-        size.width = size.height
-        size.height = temp
+        [widthMm, heightMm] = [heightMm, widthMm]
       }
 
+      // 精确转换为英寸（保留2位小数）
+      const widthInch = Math.round((widthMm / 25.4) * 100) / 100
+      const heightInch = Math.round((heightMm / 25.4) * 100) / 100
       // 格式化为Labelary API需要的格式
-      const labelarySize = `${size.width}x${size.height}`
-
-      console.log('Labelary尺寸计算:', {
-        paperType: this.selectedPaper,
-        orientation: this.orientation,
-        canvasSize: this.canvasSize,
-        calculatedSize: size,
-        labelaryFormat: labelarySize
-      })
-
+      const labelarySize = `${widthInch}x${heightInch}`
       return labelarySize
     },
 
@@ -302,32 +264,22 @@ export default {
 
       try {
         const labelSize = this.getLabelarySize()
-        const response = await axios.post(
-          `https://api.labelary.com/v1/printers/${this.labelaryDpmm}dpmm/labels/${labelSize}/0/`,
-          this.zplCode,
-          {
-            responseType: 'blob',
-            timeout: 10000
+        const apiUrl = `https://api.labelary.com/v1/printers/${this.labelaryDpmm}dpmm/labels/${labelSize}/0/`
+        const response = await axios.post(apiUrl, this.zplCode, {
+          responseType: 'blob',
+          timeout: 15000, // 增加超时时间
+          headers: {
+            'Content-Type': 'application/x-www-form-urlencoded'
           }
-        )
-
+        })
         // 清理旧的预览图片URL
         if (this.previewImage) {
           URL.revokeObjectURL(this.previewImage)
         }
-
         this.previewImage = URL.createObjectURL(response.data)
-
-        console.log('预览生成成功:', {
-          orientation: this.orientation,
-          paperType: this.selectedPaper,
-          paperId: typeof this.selectedPaper === 'number' ? this.selectedPaper : null,
-          canvasSize: this.canvasSize,
-          elementsCount: this.elements.length
-        })
       } catch (error) {
-        console.error('预览生成失败:', error)
-        this.$message.error('预览生成失败，请检查网络连接')
+        let errorMessage = '预览生成失败'
+        this.$message.error(errorMessage)
       } finally {
         this.previewLoading = false
       }
@@ -352,7 +304,7 @@ export default {
     handlePrintSuccess(result) {
       console.log('打印成功:', result)
       // 可以在这里添加打印成功后的逻辑，比如更新状态等
-    }
+    },
   },
 
   beforeDestroy() {