electron 文件路径选择框

最新推荐文章于 2025-11-11 22:33:54 发布

原创最新推荐文章于 2025-11-11 22:33:54 发布 · 2.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#electron #javascript #前端

文章介绍了如何在Electron应用中使用dialog模块来创建新的BrowserWindow并配置enableRemoteModule以使用@electron/remote。由于新版Electron不再支持@electron/remote，因此需要单独安装。在home.vue文件中，通过require(@electron/remote)引入模块，展示如何显示一个打开目录的对话框，并处理用户的选择结果。

1.background.js

引入dialog

import { app, protocol, BrowserWindow, Menu, dialog } from 'electron';

new BrowserWindow并配置 enableRemoteModule: true, //设置弹出框electron-remote

  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      icon: path.join(__dirname, '../build/icons/1024x1024.ico'),
      // title: 'FEG OTA bin文件生成工具',
      // 是否启用Node integration
      nodeIntegration: true, // Electron 5.0.0 版本之后它将被默认false
      // 是否在独立 JavaScript 环境中运行 Electron API和指定的preload 脚本.默认为 true
      contextIsolation: false, // Electron 12 版本之后它将被默认true
      enableRemoteModule: true, //设置弹出框electron-remote/
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
    },
  });

2.在electron新版中已经不支持@electron/remote了，所以需要npm i @electron/remote之后才能使用

3.home.vue文件中

引入@electron/remote模块

  const { BrowserWindow } = require('@electron/remote');
      const { dialog } = require('electron').remote;
      var { remote } = require('electron');
      console.log(remote, dialog, BrowserWindow);
      remote.dialog
        .showOpenDialog({
          title: '选择目标',
          // 打开单个文件
          // properties:["openFile"],

          // 打开多个文件
          // properties:["openFile","multiSelections"],

          // 打开目录
          properties: ['openDirectory'],
        })
        .then((result) => {
          // 是否取消
          console.log(result.canceled);
          // 文件路径
          console.log(result.filePaths);
        })
        .catch((error) => {
          console.log(error);
        });