Electron实现静默打印小票的流程详解
更新时间：2024年06月11日 09:28:53 作者：彷徨的耗子
很多情况下程序中使用的打印都是用户无感知的,并且想要灵活的控制打印内容,往往需要借助打印机给我们提供的api再进行开发,这种开发方式非常繁琐,并且开发难度较大,本文给大家介绍了Electron实现静默打印小票的流程,感兴趣的朋友可以参考下
Electron实现静默打印小票
静默打印流程
1.渲染进程通知主进程打印
//渲染进程 data是打印需要的数据
window.electron.ipcRenderer.send('handlePrint', data)
2.主进程接收消息,创建打印页面
//main.ts
/* 打印页面 */
let printWindow: BrowserWindow | undefined
/**
* @Author: yaoyaolei
* @Date: 2024-06-07 09:27:22
* @LastEditors: yaoyaolei
* @description: 创建打印页面
*/
const createPrintWindow = () => {
return new Promise<void>((resolve) => {
printWindow = new BrowserWindow({
...BASE_WINDOW_CONFIG,
title: 'printWindow',
webPreferences: {
preload: join(__dirname, '../preload/index.js'),
sandbox: false,
nodeIntegration: true,
contextIsolation: false
}
})
printWindow.on('ready-to-show', () => {
//打印页面创建完成后不需要显示,测试时可以调用show查看页面样式(下面有我处理的样式图片)
// printWindow?.show()
resolve()
})
printWindow.webContents.setWindowOpenHandler((details: { url: string }) => {
shell.openExternal(details.url)
return { action: 'deny' }
})
if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
printWindow.loadURL(`${process.env['ELECTRON_RENDERER_URL']}/print.html`)
} else {
printWindow.loadFile(join(__dirname, `../renderer/print.html`))
}
})
}
ipcMain.on('handlePrint', (_, obj) => {
//主进程接受渲染进程消息,向打印页面传递数据
if (printWindow) {
printWindow!.webContents.send('data', obj)
} else {
createPrintWindow().then(() => {
printWindow!.webContents.send('data', obj)
})
}
})
3.打印页面接收消息，拿到数据渲染页面完成后通知主进程开始打印
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>打印</title>
<style>
</style>
</head>
<body>
</body>
<script>
window.electron.ipcRenderer.on('data', (_, obj) => {
//这里是接受的消息,处理完成后将html片段放在body里面完成后就可以开始打印了
//样式可以写在style里,也可以内联
console.log('event, data: ', obj);
//这里自由发挥
document.body.innerHTML = '处理的数据'
//通知主进程开始打印
window.electron.ipcRenderer.send('startPrint')
})
</script>
</html>
这个是我处理完的数据样式,这个就是print.html
4.主进程接收消息开始打印,并且通知渲染进程打印状态
ipcMain.on('startPrint', () => {
printWindow!.webContents.print(
{
silent: true,
margins: { marginType: 'none' }
},
(success) => {
//通知渲染进程打印状态
if (success) {
mainWindow.webContents.send('printStatus', 'success')
} else {
mainWindow.webContents.send('printStatus', 'error')
}
}
)
})
完毕~
以上就是Electron实现静默打印小票的流程详解的详细内容，更多关于Electron静默打印小票的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了vant-ui组件库中如何修改NavBar导航栏的样式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了vue强制刷新组件的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-02-02
这篇文章主要为大家详细介绍了Vue之ElementUI Form表单校验，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了关于找到任意组件实例的方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了vue 登录滑动验证实现代码,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-08-08
Vue Camera组件是一个用于在Web应用中使用摄像头的Vue插件,它提供了一些常见的功能和方法来控制摄像头和捕获图像或视频数据,本文给大家介绍Vue Camera组件的常见功能和使用方法,感兴趣的朋友一起看看吧2023-11-11
el-tooltip配合el-button禁用时显示提示的问题
这篇文章主要介绍了el-tooltip配合el-button禁用时显示提示的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-06-06
vue.js是MVVM结构的，同类的还有AngularJs；至于MVC、MVP、MVVM的比较网上已经有很多了，这样不再重复。这篇文章将给大家深入的介绍vue.js双向绑定的实现原理，有需要的朋友们可以参考借鉴，下面跟着小编一起来看看吧。2016-12-12
vue Element UI 解决表格数据不更新问题及解决方案
在使用Vue和ElementUI开发后台管理系统时,可能会遇到表格数据不更新的问题,这通常是因为Vue的响应式系统未检测到数据变化或数据更新后未正确触发视图的重新渲染,本文给大家介绍vue Element UI 解决表格数据不更新问题,感兴趣的朋友一起看看吧2024-10-10
这篇文章主要介绍了vue项目自动设置请求状态的配置方法,本文通过示例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-06-06
最新评论