사용자의 관점에서 파일을 여는 방법을 생각하면 세 가지 방법이 있다고 생각합니다.

1. Menu, 바로 가기 키로 파일 선택 대화 상자를 열고 파일을 선택합니다.
2. 열려는 파일을 Window로 드래그 앤 드롭
3. 파일을 더블 클릭하여 Electron 앱에서 열기

이 기사에서는 1의 "Menu, 바로 가기 키로 파일 선택 대화 상자를 열고 파일을 선택하는"기능을 구현하는 방법에 대해 설명합니다.

자신의 환경은 이 기사를 참조. UI를 만드는 데 React를 사용하고 있습니다.

정보가 올바르지 않거나 더 스마트한 구현 방법이 있거나 할지도 모릅니다만 죄송합니다.

1. 아티팩트

2 구현 방법

Menu 과 dialog 은 기본적으로 메인 프로세스에서만 취급할 수 있는 것 같습니다. 그래서 메인 프로세스에서 Menu의 작성과 dialog를 표시하는 처리를 실시합니다. 그리고 dialog를 표시한 후에 렌더러 프로세스에 이벤트를 날립니다.

메인 프로세스라든지 렌더러 프로세스라든지 무엇입니까? 그렇다면 여기

main.js

const { Menu, dialog } = require('electron')

// メニューの作成
function createMenu() {
  const template = [
    {
      label: 'Electron',
      submenu: [
        {
          label: 'about'
        }
      ]
    },
    {
      label: 'File',
      submenu: [
        {
          label: 'Open..',
          accelerator: 'CmdOrCtrl+O', // ショートカットキーを設定
          click: () => { openFile() } // 実行される関数
        }
      ]
    }
  ]
  const menu = Menu.buildFromTemplate(template)
  Menu.setApplicationMenu(menu);
}

// ファイル選択ダイアログを開く
function openFile() {
  dialog.showOpenDialog({ properties: ['openFile'] }, (filePath) => {

    // レンダラープロセスにイベントを飛ばす
    mainWindow.webContents.send('open_file', filePath);
  })
}

// 未検証だけどMenuを作成するタイミングは別にここじゃなくても良い気がする。
app.on('ready', createMenu)

그리고 렌더러 프로세스 측에서 이벤트를 받는다.

App.js

import '../assets/css/App.css'
import React, { Component } from 'react'

const { remote, ipcRenderer } = require('electron')
const { Menu, MenuItem } = remote

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { path: '' }

    this.init();
  }

  init() {
    this.setup();
  }

  setup() {

    // イベントを受け取る
    ipcRenderer.on('open_file', (event, arg) => {

      // ファイルパスからファイル名を抜き取る
      let filePath = arg[0];
      filePath = filePath.split('\\'); 
      const fileName = filePath[filePath.length - 1];
      console.log(fileName);

      // Stateの更新
      this.setState({ path: fileName });
    })
  }

  render() {
    return (
      <div>
        <h1>Hello, Electron!</h1>
        <p>{this.state.path}</p>
      </div>
    )
  }
}

export default App

파일이 아니라 폴더를 선택하고 싶은 경우

  dialog.showOpenDialog({ properties: ['openDirectory'] }, (filePath) => {
       mainWindow.webContents.send('open_file', filePath);
  })

여러가지 설정할 수 있는 것 같기 때문에 공식 문서 를 참조해 주세요.