From 154a362af6a584e122497a8192808dadc9d1bd1c Mon Sep 17 00:00:00 2001
From: gyq <875626088@qq.com>
Date: Thu, 21 Mar 2024 14:29:15 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dist-electron/main.js | 96 ++++++++++++++++++++++++++++++++++++++++++-
 electron/main.js      | 89 +++++++++++++++++++++++++++++++++++----
 public/print.html     | 31 ++++++--------
 3 files changed, 190 insertions(+), 26 deletions(-)

diff --git a/dist-electron/main.js b/dist-electron/main.js
index 4bb7d2b..a78b0e2 100644
--- a/dist-electron/main.js
+++ b/dist-electron/main.js
@@ -1,6 +1,7 @@
 "use strict";
 const path = require("path");
 const electron = require("electron");
+const { PosPrinter } = require("electron-pos-printer-vue");
 let win;
 electron.app.whenReady().then(() => {
   win = new electron.BrowserWindow({
@@ -19,7 +20,6 @@ electron.app.whenReady().then(() => {
   });
   if (process.env.VITE_DEV_SERVER_URL) {
     win.loadURL(process.env.VITE_DEV_SERVER_URL);
-    win.webContents.openDevTools();
   } else {
     win.loadFile(path.resolve(__dirname, "../dist/index.html"));
   }
@@ -32,6 +32,100 @@ electron.app.whenReady().then(() => {
     electron.app.quit();
   });
   electron.ipcMain.on("printStart", (event, arg) => {
+    console.log("开始打印", arg);
+    let name = "Xprinter XP-365B";
+    const options = {
+      silent: true,
+      preview: false,
+      //  width of content body
+      margin: "0 0 0 0",
+      // margin of content body
+      copies: 1,
+      // Number of copies to print
+      printerName: name,
+      // printerName: string, check with webContent.getPrinters()
+      // timeOutPerLine: 400,
+      pageSize: { height: 22860, width: 30480 }
+      // page size
+    };
+    const data = [
+      {
+        type: "text",
+        // 'text' | 'barCode' | 'qrCode' | 'image' | 'table
+        value: "#B5 B6",
+        style: { "font-weight": "700", "font-size": "18px" }
+      },
+      {
+        type: "text",
+        // 'text' | 'barCode' | 'qrCode' | 'image' | 'table
+        value: "#B5 B6",
+        style: { "font-weight": "700", "font-size": "18px" }
+      },
+      {
+        type: "text",
+        // 'text' | 'barCode' | 'qrCode' | 'image' | 'table
+        value: "#B5 B6",
+        style: { "font-weight": "700", "font-size": "18px" }
+      },
+      {
+        type: "text",
+        // 'text' | 'barCode' | 'qrCode' | 'image' | 'table
+        value: "#B5 B6",
+        style: { "font-weight": "700", "font-size": "18px" }
+      },
+      {
+        type: "text",
+        // 'text' | 'barCode' | 'qrCode' | 'image' | 'table
+        value: "#B5 B6",
+        style: { "font-weight": "700", "font-size": "18px" }
+      },
+      {
+        type: "text",
+        // 'text' | 'barCode' | 'qrCode' | 'image' | 'table
+        value: "#B5 B6",
+        style: { "font-weight": "700", "font-size": "18px" }
+      },
+      {
+        type: "text",
+        // 'text' | 'barCode' | 'qrCode' | 'image' | 'table
+        value: "#B5 B6",
+        style: { "font-weight": "700", "font-size": "18px" }
+      },
+      {
+        type: "text",
+        // 'text' | 'barCode' | 'qrCode' | 'image' | 'table
+        value: "#B5 B6",
+        style: { "font-weight": "700", "font-size": "18px" }
+      },
+      {
+        type: "text",
+        // 'text' | 'barCode' | 'qrCode' | 'image' | 'table
+        value: "#B5 B6",
+        style: { "font-weight": "700", "font-size": "18px" }
+      },
+      {
+        type: "text",
+        // 'text' | 'barCode' | 'qrCode' | 'image' | 'table'
+        value: "喔喔奶茶 x100",
+        style: { "font-size": "18px" }
+      },
+      {
+        type: "text",
+        // 'text' | 'barCode' | 'qrCode' | 'image' | 'table'
+        value: "麻辣味",
+        style: { "font-size": "18px" }
+      },
+      {
+        type: "text",
+        // 'text' | 'barCode' | 'qrCode' | 'image' | 'table'
+        value: "03-08 16:32 ￥123.00",
+        style: { "font-size": "18px" }
+      }
+    ];
+    PosPrinter.print(data, options).then(() => {
+    }).catch((error) => {
+      console.error(error);
+    });
   });
 });
 electron.app.on("window-all-closed", () => {
diff --git a/electron/main.js b/electron/main.js
index 4dbe197..6861e20 100644
--- a/electron/main.js
+++ b/electron/main.js
@@ -1,5 +1,6 @@
 import path from "path";
 import { app, BrowserWindow, ipcMain } from "electron";
+const { PosPrinter } = require("electron-pos-printer-vue");
 
 let win;
 app.whenReady().then(() => {
@@ -22,7 +23,7 @@ app.whenReady().then(() => {
   if (process.env.VITE_DEV_SERVER_URL) {
     win.loadURL(process.env.VITE_DEV_SERVER_URL);
     // 使用vite开发服务的url路径访问应用
-    win.webContents.openDevTools();
+    // win.webContents.openDevTools();
   } else {
     win.loadFile(path.resolve(__dirname, "../dist/index.html")); // 打包后使用文件路径访问应用
   }
@@ -41,7 +42,7 @@ app.whenReady().then(() => {
 
   // 创建打印小票子窗口
   // const printWin = new BrowserWindow({
-  //   show: false,
+  //   show: true,
   //   webPreferences: {
   //     // 集成网页和 Node.js，也就是在渲染进程中，可以调用 Node.js 方法
   //     nodeIntegration: true,
@@ -67,15 +68,89 @@ app.whenReady().then(() => {
 
   // 执行打印操作
   ipcMain.on('printStart', (event, arg) => {
-    // console.log('开始打印', arg)
+    console.log('开始打印', arg)
 
-    // let name = 'Xprinter XP-365B'
-    // // let name = 'Generic / Text Only'
+    let name = 'Xprinter XP-365B'
+    // let name = 'Generic / Text Only'
+
+    const options = {
+      silent: true,
+      preview: false,             //  width of content body
+      margin: '0 0 0 0',            // margin of content body
+      copies: 1,                    // Number of copies to print
+      printerName: name,        // printerName: string, check with webContent.getPrinters()
+      // timeOutPerLine: 400,
+      pageSize: { height: 22860, width: 30480 }  // page size
+    }
+
+    const data = [
+      {
+        type: 'text',                         // 'text' | 'barCode' | 'qrCode' | 'image' | 'table
+        value: '#B5 B6',
+        style: { "font-weight": "700", "font-size": "18px" }
+      }, {
+        type: 'text',                         // 'text' | 'barCode' | 'qrCode' | 'image' | 'table
+        value: '#B5 B6',
+        style: { "font-weight": "700", "font-size": "18px" }
+      }, {
+        type: 'text',                         // 'text' | 'barCode' | 'qrCode' | 'image' | 'table
+        value: '#B5 B6',
+        style: { "font-weight": "700", "font-size": "18px" }
+      }, {
+        type: 'text',                         // 'text' | 'barCode' | 'qrCode' | 'image' | 'table
+        value: '#B5 B6',
+        style: { "font-weight": "700", "font-size": "18px" }
+      }, {
+        type: 'text',                         // 'text' | 'barCode' | 'qrCode' | 'image' | 'table
+        value: '#B5 B6',
+        style: { "font-weight": "700", "font-size": "18px" }
+      }, {
+        type: 'text',                         // 'text' | 'barCode' | 'qrCode' | 'image' | 'table
+        value: '#B5 B6',
+        style: { "font-weight": "700", "font-size": "18px" }
+      }, {
+        type: 'text',                         // 'text' | 'barCode' | 'qrCode' | 'image' | 'table
+        value: '#B5 B6',
+        style: { "font-weight": "700", "font-size": "18px" }
+      }, {
+        type: 'text',                         // 'text' | 'barCode' | 'qrCode' | 'image' | 'table
+        value: '#B5 B6',
+        style: { "font-weight": "700", "font-size": "18px" }
+      }, {
+        type: 'text',                         // 'text' | 'barCode' | 'qrCode' | 'image' | 'table
+        value: '#B5 B6',
+        style: { "font-weight": "700", "font-size": "18px" }
+      },
+      {
+        type: 'text',                       // 'text' | 'barCode' | 'qrCode' | 'image' | 'table'
+        value: '喔喔奶茶 x100',
+        style: { "font-size": "18px" },
+      },
+      {
+        type: 'text',                       // 'text' | 'barCode' | 'qrCode' | 'image' | 'table'
+        value: '麻辣味',
+        style: { "font-size": "18px" },
+      },
+      {
+        type: 'text',                       // 'text' | 'barCode' | 'qrCode' | 'image' | 'table'
+        value: '03-08 16:32 ￥123.00',
+        style: { "font-size": "18px" },
+      }
+    ]
+
+    PosPrinter.print(data, options)
+      .then(() => { })
+      .catch((error) => {
+        console.error(error);
+      });
 
     // printWin.webContents.print({
     //   silent: true,
-    //   printBackground: true,
-    //   deviceName: name
+    //   deviceName: name,
+    //   pageSize: {
+    //     width: 30480,
+    //     height: 22860
+    //   }
     // })
   })
 });
diff --git a/public/print.html b/public/print.html
index d188388..b8104a7 100644
--- a/public/print.html
+++ b/public/print.html
@@ -6,38 +6,33 @@
   <head>
     <meta charset="UTF-8" />
     <title>Print preview</title>
-    <style>
-      section {
-        font-size: 24px;
-      }
-    </style>
   </head>
 
   <body>
     <div id="app">
-      <div class="html2canvas" style="position: fixed;top: -1000%;">
-          <section style="font-size: 22px;">#B1 B2</section>
-          <section style="font-size: 22px;">喔喔奶茶 x12</section>
-          <section style="font-size: 22px;">麻辣味</section></section></section>
-          <section style="font-size: 22px;">03-08 16:32 ￥123.00</section>
+      <div class="html2canvas">
+          <section>#B5 B6</section>
+          <section>喔喔奶茶 x22</section>
+          <section>麻辣味</section></section></section>
+          <section>03-08 16:32 ￥123.00</section>
       </div>
     </div>
     <script type="module">
-      const { ipcRenderer } = require("electron");
+      // const { ipcRenderer } = require("electron");
       // import {
       //   createApp,
       //   ref,
       //   onMounted,
       // } from "../node_modules/vue/dist/vue.esm-browser.js";
 
-      import html2canvas  from '../node_modules/html2canvas/dist/html2canvas.esm.js'
+      // import html2canvas  from '../node_modules/html2canvas/dist/html2canvas.esm.js'
 
-      html2canvas(document.querySelector('.html2canvas')).then(canvas => {
-                console.log(canvas)
-                document.querySelector('#app').appendChild(canvas)
-              }).catch(err=> {
-                console.log(err);
-              })
+      // html2canvas(document.querySelector('.html2canvas')).then(canvas => {
+      //           console.log(canvas)
+      //           document.querySelector('#app').appendChild(canvas)
+      //         }).catch(err=> {
+      //           console.log(err);
+      //         })
 
       // createApp({
       //   setup() {