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

一、问题场景

最近是在使用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

如何在使用Vue的情况下实现Electron打开文件保存对话框?的相关文章

Linux下使用vi新建文件保存文件时遇到错误:E212: Can&#39;t open file for writing

出现E212: Can't open file for writing的问题是由于权限问题导致的,解决方法有以下思路: 1.使用root进行登录,然后再操作. 2.在使用命令时,前面加sudo. 3.如果是多级文件夹的文件时,由于这个文件夹没有创建,所以要先创建这个文件夹,再来操作这个文件. Linux下使用vi新建文件保存文件时遇到错误:E212: Can't open file for writing

18年学习笔记---word2010在正常关闭的情况下,点了“不保存”,如何恢复

参考链接:https://zhidao.baidu.com/question/464244009.html 情况一: 如果您修改了以前保存过的一篇文档,只是退出时没有保存修改结果: 可以这样找回未保存的文档: ①重新打开以前保存过的那份文档,点击"文件"按钮切换到后台视图: ②单击"信息"页: ③找到右边"版本"栏目下显示为"<时间>(当我没保存就关闭时)"的一个文件版本,单击这个版本即可. 情况二: 如果您新建了

Ubuntu下python2.7库文件保存机制

首先来点基础知识: usr文件夹一般存放用户自己安装的文件,而非系统或软件自带的文件 lib文件夹存放各个project的库文件 在Ubuntu系统中local文件夹用来存放用户自己安装的文件 除了手动安装会在site-packages外,其余文件均安装在dist-packages中 现在来看一段python开头import部分的代码: 1 from __future__ import absolute_import 2 from .cifar import load_batch 3 from

eclipse如何在不联网的情况下引入dtd约束文件

1. 获取dtd文件,解压 F:\Java配置文件\Mybatis\mybatis-3.3.0\mybatis-3.3.0.jar\org\apache\ibatis\builder\xml\ 路径下的dtd文件 2. windows > Preferences >Xml > Xml Catalog 3. 点击Add 原文地址:https://www.cnblogs.com/xianya/p/9345948.html

android在开启飞行模式的情况下,禁止打开蓝牙

(1)将alps/framework/base/packages/settingsprovider/res/values/defaults.xml里 面airplane_mode_toggleable_radios标签中的"bluetooth"去掉. (2)在packages/apps/settings/src/android/settings/bluetoothangel/BluetoothEnabler.java这支文件里进行如下修改: 1.import 如下两个包: import

CentOS 7下修改rabbitmq打开文件数量方法

以下为使用systemd的修改方法: 1.系统层修改: 通过修改sysctl配置,提高系统的打开文件数量 vim /etc/sysctl.conf,添加: fs.file-max = 65535 执行sysctl -p 此步骤调整后,打开rabbitmq管理页面,会发现rabbitmq最大的打开文件数量并未调整,需要进行下面步骤 2.修改rabbitmq配置 修改/etc/systemd/system/multi-user.target.wants/rabbitmq-server.service

bat(传参情况下)取得当前bat所在的目录路径

在传参情况下,取得bat文件所在的目录路径,可以使用: %~dp0 说明: 01.所谓传参情况是指,将某个文件拖放到bat文件上并放开.此种情况下执行的bat命令就是有带参数的. 02.上面末尾的0是指第0个参数,其实就是bat文件自己 03.[推广]如果想取得被拖放的文件所在的目录,则可以使用 %~dp1 或 %~dp2 或 ... 或 %~dpn 其中 末尾的数字代表的是第几个文件.因此可以结合 for 语句按顺序处理选中的 n 个文件.

高并发情况下Redis 的可用性测试与分析及部署架构说明

一.Redis AOF模式设置 修改配置文件redis.conf参数: appendonly yes # appendfsync always appendfsync everysec # appendfsync no 二.测试方法 创建多线程,其中每一个线程执行一个无限循环向Redis 发送set key-value命令,由于处理器执行一次循环操作的速度非常快,因此这样每一个线程都模拟了一个多并发的情况. <span style="font-size:18px;">cla

vue history模式下出现空白页情况

问题描述:   vue搭建的项目,路由一直用的hash模式,所以url中都会带有一个“#”号.现在想要去掉“#”,于是使用history模式 { mode: 'history' },代码如下: import Vue from 'vue'; import App from './App'; import routers from './router'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const router = ne