This commit is contained in:
魏啾 2024-03-25 17:07:43 +08:00
commit 6456832019
3 changed files with 190 additions and 26 deletions

View File

@ -1,6 +1,7 @@
"use strict"; "use strict";
const path = require("path"); const path = require("path");
const electron = require("electron"); const electron = require("electron");
const { PosPrinter } = require("electron-pos-printer-vue");
let win; let win;
electron.app.whenReady().then(() => { electron.app.whenReady().then(() => {
win = new electron.BrowserWindow({ win = new electron.BrowserWindow({
@ -19,7 +20,6 @@ electron.app.whenReady().then(() => {
}); });
if (process.env.VITE_DEV_SERVER_URL) { if (process.env.VITE_DEV_SERVER_URL) {
win.loadURL(process.env.VITE_DEV_SERVER_URL); win.loadURL(process.env.VITE_DEV_SERVER_URL);
win.webContents.openDevTools();
} else { } else {
win.loadFile(path.resolve(__dirname, "../dist/index.html")); win.loadFile(path.resolve(__dirname, "../dist/index.html"));
} }
@ -32,6 +32,100 @@ electron.app.whenReady().then(() => {
electron.app.quit(); electron.app.quit();
}); });
electron.ipcMain.on("printStart", (event, arg) => { 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", () => { electron.app.on("window-all-closed", () => {

View File

@ -1,5 +1,6 @@
import path from "path"; import path from "path";
import { app, BrowserWindow, ipcMain } from "electron"; import { app, BrowserWindow, ipcMain } from "electron";
const { PosPrinter } = require("electron-pos-printer-vue");
let win; let win;
app.whenReady().then(() => { app.whenReady().then(() => {
@ -22,7 +23,7 @@ app.whenReady().then(() => {
if (process.env.VITE_DEV_SERVER_URL) { if (process.env.VITE_DEV_SERVER_URL) {
win.loadURL(process.env.VITE_DEV_SERVER_URL); win.loadURL(process.env.VITE_DEV_SERVER_URL);
// 使用vite开发服务的url路径访问应用 // 使用vite开发服务的url路径访问应用
win.webContents.openDevTools(); // win.webContents.openDevTools();
} else { } else {
win.loadFile(path.resolve(__dirname, "../dist/index.html")); // 打包后使用文件路径访问应用 win.loadFile(path.resolve(__dirname, "../dist/index.html")); // 打包后使用文件路径访问应用
} }
@ -41,7 +42,7 @@ app.whenReady().then(() => {
// 创建打印小票子窗口 // 创建打印小票子窗口
// const printWin = new BrowserWindow({ // const printWin = new BrowserWindow({
// show: false, // show: true,
// webPreferences: { // webPreferences: {
// // 集成网页和 Node.js也就是在渲染进程中可以调用 Node.js 方法 // // 集成网页和 Node.js也就是在渲染进程中可以调用 Node.js 方法
// nodeIntegration: true, // nodeIntegration: true,
@ -67,15 +68,89 @@ app.whenReady().then(() => {
// 执行打印操作 // 执行打印操作
ipcMain.on('printStart', (event, arg) => { ipcMain.on('printStart', (event, arg) => {
// console.log('开始打印', arg) console.log('开始打印', arg)
// let name = 'Xprinter XP-365B' let name = 'Xprinter XP-365B'
// // let name = 'Generic / Text Only' // 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({ // printWin.webContents.print({
// silent: true, // silent: true,
// printBackground: true, // deviceName: name,
// deviceName: name // pageSize: {
// width: 30480,
// height: 22860
// }
// }) // })
}) })
}); });

View File

@ -6,38 +6,33 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>Print preview</title> <title>Print preview</title>
<style>
section {
font-size: 24px;
}
</style>
</head> </head>
<body> <body>
<div id="app"> <div id="app">
<div class="html2canvas" style="position: fixed;top: -1000%;"> <div class="html2canvas">
<section style="font-size: 22px;">#B1 B2</section> <section>#B5 B6</section>
<section style="font-size: 22px;">喔喔奶茶 x12</section> <section>喔喔奶茶 x22</section>
<section style="font-size: 22px;">麻辣味</section></section></section> <section>麻辣味</section></section></section>
<section style="font-size: 22px;">03-08 16:32 ¥123.00</section> <section>03-08 16:32 ¥123.00</section>
</div> </div>
</div> </div>
<script type="module"> <script type="module">
const { ipcRenderer } = require("electron"); // const { ipcRenderer } = require("electron");
// import { // import {
// createApp, // createApp,
// ref, // ref,
// onMounted, // onMounted,
// } from "../node_modules/vue/dist/vue.esm-browser.js"; // } 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 => { // html2canvas(document.querySelector('.html2canvas')).then(canvas => {
console.log(canvas) // console.log(canvas)
document.querySelector('#app').appendChild(canvas) // document.querySelector('#app').appendChild(canvas)
}).catch(err=> { // }).catch(err=> {
console.log(err); // console.log(err);
}) // })
// createApp({ // createApp({
// setup() { // setup() {