使用 Electron 调用系统对话框

aristark 发布于2019-08-20 14:40 / 734人阅读

摘要：使用调用系统对话框此系列文章的应用示例已发布于可以或下载后运行查看欢迎中的模块允许您使用本地系统对话框打开文件或目录保存文件或显示信息性消息这是一个主进程模块因为这个进程对于本地实用程序更有效它允许调用的同时而不会中断页面渲染器进程中

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

私有云超融合服务器 electron使用webrtc mfc 跨对话框控件调用 electron webrtc electron

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81828.html

Electron选择文件、文件夹对话框(非原创，传播)

摘要：文章转载自，感谢文章作者，成功完成选择文件夹的功能第一种方法，纯代码其原理是利用标签的类别，打开选择文件对话框通过标签的事件，将选择的文件返回。通过标签对象的属性获得选中的文件名。文章转载自：https://www.jianshu.com/p/e71...，感谢文章作者，成功完成选择文件夹的功能 1.第一种方法，纯js代码其原理是：利用input标签的file类别，打开选择文件对话...

Clect 2019-08-23 18:18 评论0 收藏0
如何使用前端技术开发一个桌面跨端应用

摘要：使用实现桌面应用实现离线可用很多方法，比如使用技术。还有一个好处，因为它完全基于来实现可以使用的一些新功能，那我们理论上可以在做桌面应用时顺手把应用也做了。本文将会讲述一个完整的跨端桌面应用代码画板的构建，会涉及到整个软件开发流程，从开始的设计、编码、到最后产品成型、包装等。本文不仅仅是一篇技术方面的专业文章，更会有很多产品方面的设计思想和将技术转换成生产力的思考，我将结合我自...

shixinzhang 2019-08-23 15:53 评论0 收藏0
electronjs 入门_2019年2月14日

electronjs 是什么?可以用javascript写，windows / mac / linux 界面程序的开发框架。参看:https://electronjs.org/ https://electronjs.org/docs 快速开始必备的条件: nodejs的安装 git git clone https://github.com/electron/e...cd electron-q...

yanwei 2019-08-23 15:12 评论0 收藏0
electronjs 入门_2019年2月14日

electronjs 是什么?可以用javascript写，windows / mac / linux 界面程序的开发框架。参看:https://electronjs.org/ https://electronjs.org/docs 快速开始必备的条件: nodejs的安装 git git clone https://github.com/electron/e...cd electron-q...

SnaiLiu 2019-08-02 14:15 评论0 收藏0
如何从0开发一个Atom组件

摘要：将剪切板中的数据转换为然后暂存到本地，通过本地文件的方式来进行上传七牛。以上，就是开发一个插件的完整流程咯。最近用Atom写博客比较多，然后发现一个很严重的问题。。没有一个我想要的上传图片的方式，比如某乎上边就可以直接copy/paste文件，然后进行上传。然而在Atom上没有找到类似的插件，最接近的一个，也还是需要手动选择文件，然后进行上传。这个操作流程太繁琐，索性自己写一个插件用...

lauren_liuling 2019-08-22 16:14 评论0 收藏0