同步6/16

src/utils/print.ts

@@ -261,3 +261,110 @@ export function printDivNewWindow(elementId: string, title: string = '打印') {
     }, 300);
   };
 }
+
+/**
+ * 🔥 Vue后台专用 - 票据专用打印（固定尺寸 宽10cm 高25cm）
+ * 新窗口打印指定DIV、还原原样式、屏蔽后台侧边栏/导航、适配Element Plus
+ * 纸张规格：10cm(宽) × 25cm(高) 票据纸
+ */
+export function printTicketDiv(elementId: string, title: string = '票据打印', callback?: () => void) {
+  const el = document.getElementById(elementId);
+  if (!el) {
+    console.error('未找到打印元素');
+    return;
+  }
+  const win = window.open('', '_blank', 'width=1200,height=1000');
+  if (!win) return;
+
+  // ==============================================
+  // 【核心1】复制 全局样式 + Element Plus 样式
+  // ==============================================
+  const styles = Array.from(document.querySelectorAll('link[rel="stylesheet"], style:not([scoped])'))
+    .map((item) => item.outerHTML)
+    .join('');
+  // ==============================================
+  // 【核心2】手动注入打印区域的 scoped 样式（关键！）
+  // ==============================================
+  const printScopeStyle = `
+   <style>
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+    body {
+      margin: 0;
+      padding: 0.3cm;
+      background: #fff;
+      font-size: 12px;
+      font-family: "Microsoft YaHei", sans-serif;
+      page-break-inside: avoid !important;
+    }
+    /* 隐藏后台布局 */
+    .el-container, .el-aside, .el-header, .el-footer {
+      display: none !important;
+    }
+
+    /* ========== 核心：强制 宽25cm 高10cm 无边距 ========== */
+    @page {
+      size: 25cm 10cm;
+      margin: 0;
+    }
+
+    /* 打印容器：固定尺寸，限制单页 */
+    #${elementId} {
+      width: 25cm !important;
+      height: 10cm !important;
+      margin: 0 auto;
+      overflow: hidden;
+      page-break-after: avoid !important;
+      page-break-inside: avoid !important;
+    }
+    /* ========== 表格：压缩高度 + 禁止拆分 ========== */
+    table {
+      border-collapse: collapse;
+      width: 100% !important;
+      table-layout: fixed;
+      margin: 0.1cm 0;
+      page-break-inside: avoid !important;
+    }
+    table th, table td {
+      border: 1px solid #333;
+      font-size: 10px;
+      height:40px;
+      min-width:80px;
+      text-align: center;
+      padding: 1px 2px; /* 缩小内边距，减少高度 */
+      line-height: 1.1;
+      white-space: normal;
+      overflow: hidden;
+    }
+  </style>
+`;
+
+  // ==============================================
+  // 【核心3】写入新窗口
+  // ==============================================
+  win.document.write(`
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <title>${title}</title>
+        <meta charset="UTF-8">
+        ${styles}
+        ${printScopeStyle}
+      </head>
+      <body>
+        ${el.outerHTML} <!-- 直接用innerHTML复制完整结构 -->
+      </body>
+    </html>
+  `);
+  win.document.close();
+  win.onload = () => {
+    setTimeout(() => {
+      win.print();
+      win.close();
+      callback && callback();
+    }, 300);
+  };
+}