使用 Electron 调用系统对话框
此系列文章的应用示例已发布于 GitHub: electron-api-demos-Zh_CN. 可以 Clone 或下载后运行查看. 欢迎 Star .
Electron 中的 dialog
模块允许您使用本地系统对话框打开文件或目录, 保存文件或显示信息性消息.
这是一个主进程模块, 因为这个进程对于本地实用程序更有效, 它允许调用的同时而不会中断页面渲染器进程中的可见元素.
在浏览器中查看 完整 API 文档 .
打开文件或目录
支持: Win, macOS, Linux | 进程: Main
在本示例中, ipc
模块用于从渲染器进程发送一条消息, 指示主进程启动打开的文件(或目录)对话框. 如果选择了文件, 主进程可以将该信息发送回渲染器进程.
渲染器进程
const ipc = require('electron').ipcRenderer
const selectDirBtn = document.getElementById('select-directory')
selectDirBtn.addEventListener('click', function (event) {
ipc.send('open-file-dialog')
})
ipc.on('selected-directory', function (event, path) {
document.getElementById('selected-file').innerHTML = `You selected: ${path}`
})
主进程
const ipc = require('electron').ipcMain
const dialog = require('electron').dialog
ipc.on('open-file-dialog', function (event) {
dialog.showOpenDialog({
properties: ['openFile', 'openDirectory']
}, function (files) {
if (files) event.sender.send('selected-directory', files)
})
})
高级技巧
macOS 上的工作表样式对话框.
在 macOS 上, 您可以在 "工作表" 对话框或默认对话框之间进行选择. 工作表版本是从窗口顶部滑落. 要使用工作表版本, 请将 window
作为对话框方法中的第一个参数.
const ipc = require('electron').ipcMain
const dialog = require('electron').dialog
const BrowserWindow = require('electron').BrowserWindow
ipc.on('open-file-dialog-sheet', function (event) {
const window = BrowserWindow.fromWebContents(event.sender)
const files = dialog.showOpenDialog(window, { properties: [ 'openFile' ]})
})
错误对话框
支持: Win, macOS, Linux | 进程: Main
在本示例中, ipc
模块用于从渲染器进程发送一条消息, 指示主进程启动错误对话框.
您可以在应用程序的 ready
事件之前使用错误对话框, 这对于在启动时显示错误很有用.
渲染器进程
const ipc = require('electron').ipcRenderer
const errorBtn = document.getElementById('error-dialog')
errorBtn.addEventListener('click', function (event) {
ipc.send('open-error-dialog')
})
主进程
const ipc = require('electron').ipcMain
const dialog = require('electron').dialog
ipc.on('open-error-dialog', function (event) {
dialog.showErrorBox('一条错误信息', '错误消息演示.')
})
信息对话框
支持: Win, macOS, Linux | 进程: Main
在本示例中, ipc
模块用于从渲染器进程发送一条消息, 指示主进程启动信息对话框. 可以提供用于响应的选项, 响应会被返回到渲染器进程中.
注意:title
属性不会显示在 macOS 中.
一个信息对话框可以包含图标, 选择的按钮, 标题和消息.
渲染器进程
const ipc = require('electron').ipcRenderer
const informationBtn = document.getElementById('information-dialog')
informationBtn.addEventListener('click', function (event) {
ipc.send('open-information-dialog')
})
ipc.on('information-dialog-selection', function (event, index) {
let message = '你选择了 '
if (index === 0) message += '是.'
else message += '否.'
document.getElementById('info-selection').innerHTML = message
})
主进程
const ipc = require('electron').ipcMain
const dialog = require('electron').dialog
ipc.on('open-information-dialog', function (event) {
const options = {
type: 'info',
title: '信息',
message: "这是一个信息对话框. 很不错吧?",
buttons: ['是', '否']
}
dialog.showMessageBox(options, function (index) {
event.sender.send('information-dialog-selection', index)
})
})
保存对话框
支持: Win, macOS, Linux | 进程: Main
在本示例中, ipc
模块用于从渲染器进程发送一条消息, 指示主进程启动保存对话框. 它返回由用户选择的路径, 并可以将其路由回渲染器进程.
渲染器进程
const ipc = require('electron').ipcRenderer
const saveBtn = document.getElementById('save-dialog')
saveBtn.addEventListener('click', function (event) {
ipc.send('save-dialog')
})
ipc.on('saved-file', function (event, path) {
if (!path) path = '无路径'
document.getElementById('file-saved').innerHTML = `选择的路径: ${path}`
})
主进程
const ipc = require('electron').ipcMain
const dialog = require('electron').dialog
ipc.on('save-dialog', function (event) {
const options = {
title: '保存图片',
filters: [
{ name: 'Images', extensions: ['jpg', 'png', 'gif'] }
]
}
dialog.showSaveDialog(options, function (filename) {
event.sender.send('saved-file', filename)
})
})
如果这边文章对您有帮助, 感谢 下方点赞 或 Star GitHub: electron-api-demos-Zh_CN 支持, 谢谢.
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。