调试打印

.env.development

@@ -0,0 +1,6 @@
+# 本地环境
+ENV = development
+
+# 本地环境接口地址
+# VITE_API_URL = 'http://192.168.2.87:10587/cashier-client'
+VITE_API_URL = 'https://cashierclient.sxczgkj.cn/cashier-client'

.env.production

@@ -0,0 +1,5 @@
+# 线上环境
+ENV = production
+
+# 线上环境接口地址
+VITE_API_URL = 'https://cashierclient.sxczgkj.cn/cashier-client/'

dist-electron/main.js

@@ -1,10 +1,10 @@
 "use strict";
 const electron = require("electron");
 const path = require("path");
-function printUtils(data) {
+function printUtils(params) {
   return new Promise(async (resolvePrint, rejectPrint) => {
     let subMainWindow = new electron.BrowserWindow({
-      show: false,
+      // show: false,
       webPreferences: {
         nodeIntegration: true,
         // For electron >= 4.0.0
@@ -13,38 +13,18 @@ function printUtils(data) {
         enableRemoteModule: true
       }
     });
-    function renderPrintDocument(window, data2) {
+    subMainWindow.loadFile(path.join(__dirname, "../public/print.html"));
-      return new Promise(async (resolve, reject) => {
-        electron.ipcMain.on("load-ok", (event, res) => {
-          setTimeout(() => {
-            resolve({ message: "page-rendered", ...res });
-          }, 500);
-        });
-      });
-    }
-    subMainWindow.on("closed", () => {
-      subMainWindow = null;
-    });
-    subMainWindow.loadFile(path.resolve(__dirname, "./public/print.html"));
     subMainWindow.webContents.on("did-finish-load", async (res) => {
-      return renderPrintDocument().then(async (result) => {
+      subMainWindow.webContents.openDevTools();
-        let height = Math.ceil((result.height + 60) * 264.5833);
+      console.log("网页加载完成", res);
-        console.info("height", result, height);
+      subMainWindow.webContents.send("getParams", params);
-        subMainWindow.webContents.print({
+      return;
-          silent: true,
+    });
-          margins: {
+    electron.ipcMain.on("printStart", () => {
-            marginType: "none"
+      console.log("开始打印");
-          },
+      subMainWindow.webContents.print({
-          printBackground: false,
+        silent: true
-          deviceName: options.printerName,
+      });
-          copies: 1
-        }, (success) => {
-          if (success) {
-            resolvePrint({ type: "success" });
-          }
-          subMainWindow.close();
-        });
-      }).catch((err) => console.warn(33, err));
     });
   });
 }
@@ -54,9 +34,9 @@ electron.app.whenReady().then(() => {
     width: 1200,
     height: 800,
     fullscreenable: true,
-    fullscreen: false,
+    fullscreen: true,
     simpleFullscreen: true,
-    frame: true,
+    frame: false,
     webPreferences: {
       // 集成网页和 Node.js，也就是在渲染进程中，可以调用 Node.js 方法
       nodeIntegration: true,
@@ -68,7 +48,6 @@ electron.app.whenReady().then(() => {
   } else {
     win.loadFile("dist/index.html");
   }
-  win.webContents.openDevTools();
   electron.app.on("activate", () => {
     if (electron.BrowserWindow.getAllWindows().length === 0) {
       createWindow();
@@ -78,10 +57,7 @@ electron.app.whenReady().then(() => {
     electron.app.quit();
   });
   electron.ipcMain.on("printerInfoSync", async (event, params) => {
-    console.log("接收到打印消息", params);
+    await printUtils(params);
-    const res = await printUtils();
-    event.returnValue = res;
-    console.log("已打印", res);
   });
 });
 electron.app.on("window-all-closed", () => {

electron/main.js

@@ -7,9 +7,9 @@ app.whenReady().then(() => {
     width: 1200,
     height: 800,
     fullscreenable: true,
-    fullscreen: false,
+    fullscreen: true,
     simpleFullscreen: true,
-    frame: true,
+    frame: false,
     webPreferences: {
       // 集成网页和 Node.js，也就是在渲染进程中，可以调用 Node.js 方法
       nodeIntegration: true,
@@ -24,7 +24,7 @@ app.whenReady().then(() => {
     // Load your file
     win.loadFile("dist/index.html");
   }
-  win.webContents.openDevTools();
+  // win.webContents.openDevTools();
   app.on("activate", () => {
     // 在 macOS 系统内, 如果没有已开启的应用窗口
     // 点击托盘图标时通常会重新创建一个新窗口
@@ -38,10 +38,7 @@ app.whenReady().then(() => {
   });
 
   ipcMain.on('printerInfoSync', async (event, params) => {
-    console.log('接收到打印消息', params)
+    await printUtils(params)
-    const res = await printUtils(params)
-    event.returnValue = res
-    console.log('已打印', res)
   })
 });
 

electron/printUtils.js

@@ -1,12 +1,10 @@
 import { BrowserWindow, ipcMain } from 'electron';
 import path from "path";
 
-
+export function printUtils(params) {
-export function printUtils(data) {
     return new Promise(async (resolvePrint, rejectPrint) => {
-
         let subMainWindow = new BrowserWindow({
-            show: false,
+            // show: false,
             webPreferences: {
                 nodeIntegration: true,        // For electron >= 4.0.0
                 contextIsolation: false,
@@ -15,26 +13,14 @@ export function printUtils(data) {
             }
         });
 
-        function renderPrintDocument(window, data) {
-            return new Promise(async (resolve, reject) => {
-                ipcMain.on('load-ok', (event, res) => {
-                    //在这里可以添加打印的判断条件等......
-                    setTimeout(() => {
-                        resolve({ message: 'page-rendered', ...res });
-                    }, 500)
-                })
-            })
-        }
-
-
-        // If the subMainWindow is closed, reset the `subMainWindow` var to null
-        subMainWindow.on('closed', () => {
-            subMainWindow = null;
-        });
         // 加载打印的html文件
-        subMainWindow.loadFile(path.resolve(__dirname, "./public/print.html"));
+        subMainWindow.loadFile(path.join(__dirname, "../public/print.html"));
 
         subMainWindow.webContents.on('did-finish-load', async (res) => {
+            subMainWindow.webContents.openDevTools();
+            console.log('网页加载完成', res)
+            subMainWindow.webContents.send('getParams', params)
+            return
             let data = []
             return renderPrintDocument(subMainWindow, data)
                 .then(async (result) => {
@@ -47,10 +33,9 @@ export function printUtils(data) {
                             marginType: 'none'
                         },
                         printBackground: false,
-                        deviceName: options.printerName,
+                        deviceName: '',
                         copies: 1,
                     }, (success) => {
-
                         if (success) {
                             resolvePrint({ type: 'success' })
                         }
@@ -59,5 +44,11 @@ export function printUtils(data) {
                 })
                 .catch(err => console.warn(33, err))
         })
+        ipcMain.on('printStart', () => {
+            console.log('开始打印')
+            subMainWindow.webContents.print({
+                silent: true
+            })
+        })
     })
 }

public/print.html

@@ -10,25 +10,99 @@
       @page {
         size: auto;
       }
+
+      html {
+        padding-bottom: 100px;
+      }
+
+      .title_wrap {
+        font-weight: bold;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        padding: 50px 0;
+      }
+
+      .title {
+        font-size: 24px;
+      }
+
+      .min_title {
+        font-size: 18px;
+        padding-top: 10px;
+      }
+
+      .item {
+        padding: 20px 0;
+      }
+
+      .item.b {
+        font-weight: bold;
+      }
+
+      .img {
+        width: 100%;
+        display: block;
+      }
     </style>
   </head>
 
   <body>
-    <section id="main">测试打印</section>
+    <br />
-    <!-- <script type="module">
+    <section id="app">
+      <div class="title_wrap">
+        <div class="title">
+          <b>{{data.shop_name}}</b>
+        </div>
+        <div class="min_title">结账单</div>
+      </div>
+      <div class="item b">NO:{{data.orderId}}</div>
+      <div class="item b">开始时间：2023-3-4 16:32:54</div>
+      <div class="item b">结束时间：2023-3-4 16:32:54</div>
+      <div class="item b">打印人：002-蔡紫薇 打印次数：第一次打印</div>
+      <div class="item b">品相费：450</div>
+      <div class="item b">服务费：280</div>
+      <div v-for="(item,index) in data.carts" :key="index">
+        <div class="item">{{item.name}} {{item.number}}</div>
+        <br />
+      </div>
+      <div class="item b">收银员：张三</div>
+    </section>
+    <div class="item b">电话</div>
+    <br />
+    <div class="item b">地址：陕西省西安市灞桥区后海餐厅一二三</div>
+    <br />
+    <div class="item b">--------------------------------</div>
+    <br />
+    <div class="item b">--------------------------------</div>
+    <br />
+    <div class="item b">--------------------------------</div>
+    <br />
+    <script type="module">
       const { ipcRenderer } = require("electron");
-      window.onload = () => {
+      import {
-        ipcRenderer.on("webview-print-render", (event, info) => {
+        createApp,
-          // 执行渲染
+        ref,
-          const main = document.getElementById("main");
+        onMounted,
-          main.appendChild(info.shop_name);
+      } from "../node_modules/vue/dist/vue.esm-browser.js";
-          ipcRenderer.send("load-ok", {
+
-            width: document.body.clientWidth,
+      createApp({
-            height: document.body.clientHeight,
+        setup() {
+          const data = ref({});
+
+          onMounted(() => {
+            ipcRenderer.on("getParams", (event, arg) => {
+              data.value = JSON.parse(arg);
+            });
+            ipcRenderer.send("printStart");
           });
-          ipcRenderer.sendToHost("did-finish-load");
+
-        });
+          return {
-      };
+            data,
-    </script> -->
+          };
+        },
+      }).mount("#app");
+    </script>
   </body>
 </html>

src/utils/request.js

@@ -4,7 +4,7 @@ import useStorage from '@/utils/useStorage'
 import router from '@/router'
 
 const service = axios.create({
-  baseURL: import.meta.env.MODE == 'development' ? '/api/' : '/api/admin',
+  baseURL: import.meta.env.MODE == 'development' ? '/api/' : import.meta.env.VITE_API_URL,
   // withCredentials: true, // 跨域请求时发送 cookies
   timeout: 5000, // 请求超时
 });

src/views/home/components/settleAccount.vue

@@ -94,13 +94,14 @@ const isPrint = ref(true)
 
 function printHandle() {
     if (!isPrint.value) return
-    // const data = {
+    const data = {
-    //     shop_name: '测试打印',
+        shop_name: '大客餐饮',
-    //     carts: props.cart,
+        carts: props.cart,
-    //     amount: props.amount,
+        amount: props.amount,
-    //     remark: props.remark
+        remark: props.remark,
-    // }
+        orderId: props.orderId
-    ipcRenderer.sendSync('printerInfoSync', '测试打印')
+    }
+    ipcRenderer.sendSync('printerInfoSync', JSON.stringify(data))
 }
 
 // 订单已支付

src/views/home/index.vue

@@ -97,7 +97,7 @@
   <remarkModal ref="remarkRef" @success="e => remark = e" />
   <!-- 修改取餐号 -->
   <takeFoodCode />
-  <el-drawer v-model="membershow" :with-header="true" size="90%" title="选择会员" >
+  <el-drawer v-model="membershow" :with-header="true" size="90%" title="选择会员">
     <member :membershow="'1'"></member>
   </el-drawer>
   <takeFoodCode ref="takeFoodCodeRef" title="修改取餐号" placeholder="请输入取餐号" @success="takeFoodCodeSuccess" />