fix(outbound): 重构confirmPrint为iframe打印模式，彻底粉碎全局CSS高度锁死

2026-04-21 14:35:34 +08:00
parent f53b16f512
commit dd54e047dd
1 changed files with 88 additions and 3 deletions
--- a/inventory-web/src/views/outbound/Selection.vue
+++ b/inventory-web/src/views/outbound/Selection.vue
@ -794,6 +794,15 @@ const handlePreview = () => {
  previewVisible.value = true
 }

+// 创建隐藏 iframe 用于打印
+const printFrame = document.createElement('iframe');
+printFrame.style.position = 'absolute';
+printFrame.style.width = '0';
+printFrame.style.height = '0';
+printFrame.style.border = '0';
+document.body.appendChild(printFrame);
+const iframeDoc = printFrame.contentWindow.document;
+
 const confirmPrint = async () => {
  previewVisible.value = false;
  // 记录日志
@ -804,9 +813,85 @@ const confirmPrint = async () => {
    printSelectionList(JSON.parse(JSON.stringify(payload))).catch(() => {});
  } catch (e) {}

-  setTimeout(() => {
-    window.print();
-  }, 300);
+  // 获取 #print-area 元素和当前 computed 样式
+  const printElement = document.getElementById('print-area');
+  if (!printElement) return;
+  const styles = Array.from(document.styleSheets)
+    .filter(sheet => {
+      try { return !sheet.href || sheet.href.indexOf(window.location.host) !== -1; } catch { return false; }
+    })
+    .map(sheet => {
+      try {
+        return Array.from(sheet.cssRules).map(rule => rule.cssText).join('\n');
+      } catch { return ''; }
+    }).join('\n');
+
+  // 4. 将提取的样式和要打印的 HTML 写入 iframe
+  iframeDoc.open();
+  iframeDoc.write(`
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <title>IRIS出库拣货确认单</title>
+        ${styles}
+        <style>
+          /* ================= 终极分页破解指令 ================= */
+          /* 1. 彻底粉碎所有从全局继承来的高度锁死和隐藏属性 */
+          html, body {
+            height: auto !important;
+            min-height: 100% !important;
+            max-height: none !important;
+            overflow: visible !important;
+            position: static !important;
+            margin: 0 !important;
+            padding: 0 !important;
+            background: white !important;
+          }
+          
+          /* 2. 规范 A4 纸张，利用浏览器原生分页 */
+          @page {
+            size: A4 portrait;
+            margin: 10mm;
+          }
+
+          /* 3. 强制打印区化为最普通的流式元素，解除一切束缚 */
+          #print-area { 
+            display: block !important; 
+            position: static !important; 
+            height: auto !important;
+            overflow: visible !important;
+            width: 100% !important;
+            margin: 0 !important;
+          }
+
+          /* 4. 让表格宽度自适应 A4 纸，并严禁在行中间断裂 */
+          .print-table {
+            width: 100% !important;
+            table-layout: auto !important;
+          }
+          .print-table tr, .print-table td, .print-table th {
+            page-break-inside: avoid !important;
+            break-inside: avoid !important;
+          }
+
+          /* 5. 隐藏 Vue 拷进来的多余弹窗 UI */
+          .el-overlay, .el-dialog__wrapper, .no-print-content { 
+            display: none !important; 
+          }
+        </style>
+      </head>
+      <body>
+        ${printElement.outerHTML}
+      </body>
+    </html>
+  `);
+  iframeDoc.close();
+  
+  // 等 iframe 加载完毕后触发打印
+  printFrame.onload = () => {
+    printFrame.contentWindow.focus();
+    printFrame.contentWindow.print();
+  };
 }

 const confirmExport = () => {