Electron - 从菜单打开文件

Question

我的电子应用程序中有一个按钮，上面写着“打开文件”，当您单击它时，会出现“打开文件”对话框，我可以选择一个文件。

但是，当我单击应用程序工具栏中的菜单项时，如何打开“打开文件对话框”框？

这是我在工具栏菜单的子菜单中的标签：

label: 'Open',
accelerator: 'CmdOrCtrl+O'

我想做类似的事情：

label: 'Open',
accelerator: 'CmdOrCtrl+O',
role: 'open'

但不存在“开放”这样的角色。

如何实现打开打开文件对话框的单击事件？

Main.js 打开文件部分：

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-file', files)
  })
})

索引.js：

const ipc = require('electron').ipcRenderer
const selectDirBtn = document.getElementById('open')

selectDirBtn.addEventListener('click', function (event) {
    ipc.send('open-file-dialog')
})

ipc.on('selected-file', function (event, path) {
    document.getElementById('selected-file').innerHTML = `► ${path}`
    document.getElementById('selected-file2').innerHTML = `${path}`
})

Answer 1

我有两个按钮，一个不可见的输入文件和可见的样式按钮。

<input type="file" id="fileId" style="display:none;" />
<button class="btn-lg btn-primary center-block" type="button"
    id="btnLoadFile">Load File</button>

在js中，我设置样式按钮单击事件来触发输入文件单击事件。

document.getElementById('btnLoadFile').addEventListener("click", function(){
    document.getElementById('fileId').click();
});

然后我有一个针对输入文件元素的更改事件侦听器，它对文件执行一些操作。

document.getElementById('fileId').addEventListener('change', function(e){
    //use the file here
    var files = e.target.files;
    var f = files[0]; {
        var reader = new FileReader();
        var name = f.name;
        reader.onload = function (e) {
            console.log(e.target.result);
        };
        reader.readAsBinaryString(f);
    }
});

希望这可以帮助。