1. Escenarios de negocio
La empresa tiene un producto de caja registradora de Electron+Vue.Después de la caja registradora, la información del pedido debe imprimirse a través del recibo, y algunos problemas y errores encontrados en esta demanda deben registrarse.
2. Soluciones
Procese el contenido que se va a imprimir a través de la vista web o una nueva ventana, y luego envíe el contenido de la página a la máquina expendedora de boletos pequeños a través de la API webcontents.print e imprímalo en silencio
3. Implementación del código
3.1 El proceso de renderizado activa la impresión
Este código se implementa usando vue3+electron, pero para facilitar el mantenimiento del proyecto y resolver el problema de que el cliente también necesita actualizarse cuando la página web se actualiza en la etapa inicial, el código del cliente y la página web se estructuran en dos proyectos míos, así que el ipc aquí está a través de la ventana. Al hacer clic en Imprimir, la configuración y los datos a imprimir se enviarán al proceso principal.
// 处理点击打印的事件
const handlePrint = () => {
const { ipcRenderer } = window.require('electron')
ipcRenderer.invoke("my-print", JSON.stringify({
option: {
silent: true,
deviceName: store.state?.config?.defaultLittlePrinter,
printBackground: true,
margins: {
marginType: "none"
},
scaleFactor: 80,
},
data: {
orderDetail: state.orderDetail
}
}));
}3.2 El proceso principal recibe y procesa eventos
El proceso principal comienza a crear la ventana después de recibir el evento my-print
ipcMain.handle('my-print', (event, params) => {
this.createPrintWindow(JSON.parse(params))
});código createPrintWindow para crear una ventana
createPrintWindow(params) {
// 实例化一个窗口出来
this.printWindow = new BrowserWindow({
width: 150,
minHeight: 100,
frame: false,
skipTaskbar: true,
transparent: true,
resizable: false,
show: false, //不要让窗口显示出来
webPreferences: {
contextIsolation: false,
webviewTag: true,
nodeIntegration: true,
webSecurity: false,
}
})
// 让窗口去加载webPage里面的某个路由
this.printWindow.loadURL("http://localhost:3001/#/print")
// 页面加载完成了就可以执行打印的流程了
this.printWindow.once('ready-to-show', async () => {
setTimeout(() => {
this.printWindow.webContents.send('getPrinterData', params.data.orderDetail);
}, 100);
setTimeout(() => {
this.printWindow.webContents.print(params.option, (success: boolean, failureReason: string) => {
this.printWindow.destroy()
this.printWindow = null
})
}, 1000);
})
}El locahost cargado: 3001/código de impresión
<script setup>
import { ref } from "vue"
import { useStore } from "vuex"
const store = useStore()
const orderDetail = ref()
const { ipcRenderer } = window.require("electron")
ipcRenderer.once("getPrinterData", (event, data) => {
orderDetail.value = data
});
</script>Aquí, dos temporizadores se utilizan directamente para garantizar que los datos se puedan recibir cuando se carga la página y la página se puede procesar al imprimir Aunque es un método estúpido, la función principal es realizar la función. Lo que pensé al principio fue que la página de la ventana principal y la página de la ventana de impresión son un proyecto que se puede guardar directamente usando vuex, pero después de crear una nueva ventana, se vuelve a crear una instancia del vuex de la nueva ventana y no se puede obtener el valor , y luego directamente a través de ipc Pase los datos de vuelta a la página Imprimir cuando se pasa al proceso principal y luego se imprime. Pero cómo transferir datos no es muy importante, incluso puede conservar datos a través de localStorage, base de datos, etc., imprimirlos y luego eliminarlos.
4. error
AVISO: La versión electrónica que usé antes era la 19.0. Los repetidos intentos de llamar a la API de impresión reportarían un error. Más tarde, la reemplacé con la última versión 19.0.8. .
Los dos setTimeouts aquí son muy llamativos. Cuando tenga tiempo, optimícelos en promesas
¿Por qué usar BrowserWindow para implementar en lugar de usar webview? Para webview, también necesita escribir un archivo html estático como la estructura que imprime.Es más fácil imprimir la estructura de vue directamente usando BrowserWindow
Para agregar, la lista de impresoras en el proyecto se administra a través de la configuración, y al imprimir un boleto pequeño, el nombre de la máquina de boletos pequeños se pasa directamente al proceso principal para la impresión silenciosa.
