打印出货单适配点阵打印机完成

klp-ui/src/views/wms/delivery/components/wayBill.vue

@@ -2,6 +2,7 @@
 <template>
   <div>
     <div class="waybill-container" ref="waybillRef">
+      <div class="waybill-content">
       <!-- 头部信息 -->
       <div class="waybill-header">
         <div class="header-left">
@@ -123,6 +124,7 @@
           <input type="text" class="editable-input signature-input transparent-input" />
         </div>
       </div>
+      </div>
     </div>
     <!-- 操作按钮 -->
     <div class="waybill-actions">
@@ -157,7 +159,7 @@ export default {
   data() {
     return {
       currentPage: 1,
-      perPage: 5,
+      perPage: 10,
       totalPages: 1,
       // 本地可编辑的发货单数据
       localWaybill: {
@@ -173,7 +175,7 @@ export default {
       },
       // 本地可编辑的发货单明细
       localWaybillDetails: [],
-      // 预览/打印用明细（每页固定5行，不足补空行）
+      // 预览/打印用明细（每页固定7行，不足补空行）
       displayWaybillDetails: []
     };
   },
@@ -315,6 +317,10 @@ export default {
       const node = this.$refs.waybillRef;
       const paperWidthMm = 241;
       const paperHeightMm = 140;
+      const safeRightMarginMm = 45;
+      const safeLeftPaddingMm = 6;
+      const safeTopShiftMm = 15;
+      const safeContentWidthMm = paperWidthMm - safeRightMarginMm - safeLeftPaddingMm;
 
       const mmToPx = (mm) => (mm * 96) / 25.4;
       const mmToPt = 72 / 25.4;
@@ -332,12 +338,29 @@ export default {
 
       const pdfDoc = await PDFDocument.create();
 
+      // 强制让容器内容不被裁剪，以便html2canvas完整捕获
+      const originalStyle = { width: node.style.width, overflow: node.style.overflow };
+      const contentEl = node.querySelector('.waybill-content');
+      const originalContentCssText = contentEl ? contentEl.style.cssText : '';
+
+      node.style.width = 'auto';
+      node.style.overflow = 'visible';
+
+      // 针对“导出PDF再打印”的场景：为打印机右侧不可打印区预留约30mm
+      // 通过缩放内容区域（不换行、不省略），让最终PDF右侧自带留白
+      if (contentEl) {
+        contentEl.style.setProperty('--content-width-mm', String(safeContentWidthMm));
+        contentEl.style.setProperty('--offset-x-mm', String(safeLeftPaddingMm));
+        contentEl.style.setProperty('--offset-y-mm', String(safeTopShiftMm));
+      }
+
       try {
         for (let page = 1; page <= totalPages; page++) {
           this.currentPage = page;
           this.displayWaybillDetails = this.buildPage(allDetails, page);
           await this.$nextTick();
 
+          // 固定按纸张尺寸截图：右侧留白来自于 contentEl 的缩放（241 -> 211mm），而不是扩大截图宽度
           const canvas = await html2canvas(node, {
             backgroundColor: '#ffffff',
             scale: 3,
@@ -346,20 +369,27 @@ export default {
             width: pageWidthPx,
             height: pageHeightPx,
             windowWidth: pageWidthPx,
-            windowHeight: pageHeightPx
+            windowHeight: pageHeightPx,
+            scrollX: 0,
+            scrollY: 0
           });
 
-          const png = canvas.toDataURL('image/png');
+      const png = canvas.toDataURL('image/png');
-          const imgPng = await pdfDoc.embedPng(png);
+      const imgPng = await pdfDoc.embedPng(png);
           const pdfPage = pdfDoc.addPage([pageWidthPt, pageHeightPt]);
           pdfPage.drawImage(imgPng, {
-            x: 0,
+        x: 0,
-            y: 0,
+        y: 0,
-            width: pageWidthPt,
+        width: pageWidthPt,
-            height: pageHeightPt
+        height: pageHeightPt
-          });
+      });
         }
       } finally {
+        // 恢复截图前的容器样式
+        node.style.width = originalStyle.width;
+        node.style.overflow = originalStyle.overflow;
+        if (contentEl) contentEl.style.cssText = originalContentCssText;
+
         this.currentPage = originalPage;
         this.displayWaybillDetails = originalDisplay;
         this.refreshPagination();
@@ -388,12 +418,28 @@ export default {
   width: 241mm;
   height: 140mm;
   margin: 0 auto;
-  padding: 6mm;
+  padding: 0;
-  padding-top: 22mm;
   background: #fff;
   box-shadow: none;
   font-family: SimSun, "Courier New", monospace;
   overflow: hidden;
+  box-sizing: border-box;
+}
+
+.waybill-content {
+  --paper-width-mm: 241;
+  --content-width-mm: 241;
+  --offset-x-mm: 0;
+  --offset-y-mm: 0;
+  --scale: calc(var(--content-width-mm) / var(--paper-width-mm));
+
+  width: calc(var(--paper-width-mm) * 1mm);
+  transform-origin: top left;
+  transform: translate(calc(var(--offset-x-mm) * 1mm), calc(var(--offset-y-mm) * 1mm)) scale(var(--scale));
+}
+
+.waybill-content * {
+  box-sizing: border-box;
 }
 
 /* 头部样式 */
@@ -726,50 +772,54 @@ export default {
 }
 
 /* 打印样式 */
+@page {
+  size: 241mm 140mm;
+  margin: 0;
+}
+
 @media print {
-  .waybill-container {
+  html,
-    width: 100%;
+  body {
-    max-width: none;
+    margin: 0;
-    box-shadow: none;
     padding: 0;
   }
 
-  .waybill-header {
+  /* 打印机通常存在不可打印区：这里右侧预留30mm安全边距，避免右侧被裁 */
-    flex-wrap: nowrap;
+  .waybill-container {
-    justify-content: space-between;
+    width: 241mm;
+    height: 140mm;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
   }
 
-  .waybill-footer {
+  .waybill-content {
-    flex-wrap: nowrap;
+    --paper-width-mm: 241;
-    justify-content: space-between;
+    /* 右侧预留约30mm不可打印区：241 - 30 = 211 */
-  }
+    --content-width-mm: 211;
-
+    --offset-x-mm: 0;
-  .label {
+    --offset-y-mm: 0;
-    width: 80px;
+    --scale: calc(var(--content-width-mm) / var(--paper-width-mm));
-    text-align: right;
+
-    white-space: nowrap;
+    width: calc(var(--paper-width-mm) * 1mm);
-  }
+    transform-origin: top left;
-
+    transform: translate(calc(var(--offset-x-mm) * 1mm), calc(var(--offset-y-mm) * 1mm)) scale(var(--scale));
-  .waybill-actions {
-    display: none;
-  }
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .waybill-header {
-    flex-direction: column;
-    gap: 15px;
-    align-items: flex-start;
-  }
-
-  .waybill-table {
-    font-size: 12px;
   }
 
+  /* 打印时不要省略：允许换行并让行高/高度自适应 */
   .waybill-table th,
   .waybill-table td {
-    padding: 2px;
+    white-space: normal !important;
+    overflow: visible !important;
+    text-overflow: clip !important;
+    height: auto !important;
+    line-height: 1.2 !important;
+  }
+
+  .waybill-table input {
+    white-space: normal !important;
+    overflow: visible !important;
+    text-overflow: clip !important;
   }
 
   .waybill-footer {
@@ -787,4 +837,4 @@ export default {
     text-align: left;
   }
 }
-</style>
+</style>