如何在使用Vue的情況下實現Electron打開文件保存對話框？-創(chuàng)新互聯
一、問題場景
最近是在使用Electron+Vue構建一個基于modbus rtu協(xié)議的上位機應用，使用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的組件中定義觸發(fā)函數和響應函數，這里是MainPage.vue
（1）首先為Button綁定Click點擊事件：
（2）接下來在script代碼塊的methods中定義handleSaveChart方法
export default {
methods: {
handleSaveChart: function () {
// 向IPC通道發(fā)送信號，此時主線程收到信號立即執(zhí)行相對應的響應函數
const ipc = require('electron').ipcRenderer;
ipc.send('open-save-chart-dialog');
}
}
}（3）在Vue組件的created方法中定義主線程向渲染線程發(fā)送信號的響應函數
created() {
const ipc = require('electron').ipcRenderer;
ipc.on('save-finished', function (event, filename) {
// 當filename等于null的時候表示用戶點擊了取消按鈕
// 當用戶點擊保存按鈕的時候filename的值是對應文件的絕對路徑
console.log(filename)
})
}另外有需要云服務器可以了解下創(chuàng)新互聯cdcxhl.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。
分享文章：如何在使用Vue的情況下實現Electron打開文件保存對話框？-創(chuàng)新互聯
網站鏈接：http://m.jiaotiyi.com/article/hgojh.html