成都创新互联网站制作重庆分公司

如何在使用Vue的情况下实现Electron打开文件保存对话框?-创新互联

一、问题场景

最近是在使用Electron+Vue构建一个基于modbus rtu协议的上位机应用,使用ipcMain和ipcRenderer实现点击Vue组件后打开对话框,获取到文件路径并写入数据,完成后通知。但是出现ipcRenderer.on() 调用多次的错误情况。
那么,使用Electron+Vue实现文件保存的正确姿势是什么呢?

创新互联自2013年起,先为方城等服务建站,方城等地企业,进行企业商务咨询服务。为方城企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

二、具体实现

在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点击事件:

(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)
      })
}

另外有需要云服务器可以了解下创新互联cdcxhl.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网站标题:如何在使用Vue的情况下实现Electron打开文件保存对话框?-创新互联
网页网址:http://cxhlcq.com/article/hgojh.html

其他资讯

在线咨询

微信咨询

电话咨询

028-86922220(工作日)

18980820575(7×24)

提交需求

返回顶部