一、问题场景
最近是在使用Electron+Vue构建一个基于modbus rtu协议的上位机应用,使用ipcMain和ipcRenderer实现点击Vue组件后打开对话框,获取到文件路径并写入数据,完成后通知。但是出现ipcRenderer.on() 调用多次的错误情况。
那么,使用Electron+Vue实现文件保存的正确姿势是什么呢?
二、具体实现
在electron的src/main/index.js中定义IPC通道
// 1. 引入对话框与IPC通信模块
const ipc = require(‘electron‘).ipcMain
const dialog = require(‘electron‘).dialog
// 2.定义IPC主进程响应函数
ipc.on(‘open-save-chart-dialog‘, function (event) {
dialog.showSaveDialog({
title: ‘保存图像文件‘,
defaultPath: ‘/‘,
filters: [
{
name: ‘Images‘,
extensions: [‘png‘, ‘jpg‘]
}
]
}, function (filename) {
// 通知渲染进程,将获取到的文件路径传给Vue组件中响应函数
event.sender.send(‘save-finished‘, filename);
})
})
在Vue的组件中定义触发函数和响应函数,这里是MainPage.vue
(1)首先为Button绑定Click点击事件:
<Button type="info" style="width: 100%" @click="handleSaveChart">保存</Button>
(2)接下来在script代码块的methods中定义handleSaveChart方法
export default {
methods: {
handleSaveChart: function () {
// 向IPC通道发送信号,此时主线程收到信号立即执行相对应的响应函数
const ipc = require(‘electron‘).ipcRenderer;
ipc.send(‘open-save-chart-dialog‘);
}
}
}
(3)在Vue组件的created方法中定义主线程向渲染线程发送信号的响应函数
created() {
const ipc = require(‘electron‘).ipcRenderer;
ipc.on(‘save-finished‘, function (event, filename) {
// 当filename等于null的时候表示用户点击了取消按钮
// 当用户点击保存按钮的时候filename的值是对应文件的绝对路径
console.log(filename)
})
}
原文地址:https://blog.51cto.com/xvjunjie/2455815
时间: 2024-11-08 20:41:19