使用 Electron 調用系統對話框

使用 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 支持, 謝謝.