javascript - 在 Electron 文件对话框中按扩展名过滤

Question

如何在 Electron 文件对话框中按扩展名添加过滤器。例如:

function openDialogExample() {
    var remote = require('remote');
    var dialog = remote.require('dialog');

    return dialog.showOpenDialog(
      remote.getCurrentWindow(),
      {
          defaultPath: 'c:/',
          filters: [
              { name: 'All Files', extensions: ['*'] },
              { name: 'Images', extensions: ['jpg', 'png', 'gif'] },
              { name: 'Movies', extensions: ['mkv', 'avi', 'mp4'] }
            ],
          properties: ['openFile']
      }
    );
}

如何在我的代码库中实现它？

const app = require('electron').remote
const fs = require('fs')
const dialog = app.dialog

document.getElementById('importWallet').onclick = () => {
    dialog.showOpenDialog((fileName) => {
        if(fileName !== undefined) {
            readWallet(fileName[0])
        }
    });
}

function readWallet(filePath) {
    fs.readFile(filePath, 'utf-8', (err, data) => {
        if(err) {
            alert('An error occured while importing your wallet', err)
            return
        }
    })
}

Answer 1

第一步:您必须将 IPC 从(主进程)main.js 发送到(渲染进程)index.js。更多详情 read this , this和 this .

第二步:现在您可以处理 openFile 或 openDirectory 或 ...

一个例子(我的代码):

ma​​in.js:(使用 win.webContents.send(...)；我发送一个 ipc)

... after require some library in app.on("ready", () => {
   let appMenu = [
       {
            "label": "file",
            "submenu":
                [
                    {
                        "label": "open file",
                        "accelerator": "CmdOrCtrl+o",
                        click() {
                            showDialog("openFile");
                        },
                    }, // end ofshowSaveDialog "open file"
                    {
                        "label": "save file",
                        "accelerator": "CmdOrCtrl+s",
                        click() {
                            showDialog("saveFile");
                        },
                    }, // end of "save file"
                    {
                        "type": "separator"
                    },
                    {
                        "label": "open Directory",
                        "accelerator": "CmdOrCtrl+k+o",
                        click() {
                            showDialog("openDirectory");
                        },
                    }, // end ofshowSaveDialog "openDirectory"
                    {
                        "type": "separator"
                    },
                    {
                        "label": "exit app",
                        "accelerator": "CmdOrCtrl+X",
                        "role": "quit",
                    } // end of "exit"
                ], // end of "submenu file"
        }, // end of "file"
    ]
})
function showDialog(typeShowDialog) {
switch (typeShowDialog) {
    case "openFile":
    case "openDirectory":
        dialog.showOpenDialog(
            {
                "title": `${typeShowDialog}`,
                "properties": [`${typeShowDialog}`], // openDirectory, multiSelection, openFile
                "filters":
                    [
                        {
                            "name": "all",
                            "extensions": ["*"]
                        },
                        {
                            "name": "text file",
                            "extensions": ["txt", "text"]
                        },
                        {
                            "name": "html",
                            "extensions": ["htm", "html"]
                        },
                        {
                            "name": "style sheet",
                            "extensions": ["css"]
                        },
                        {
                            "name": "javascript",
                            "extensions": ["js"]
                        },
                        {
                            "name": "c++",
                            "extensions": ["cpp", "cc", "C", "cxx"],
                        },
                        {
                            "name": "json",
                            "extensions": ["json"]
                        },
                    ],
            }, // end of options: electron.OpenDialogOptions
            (filename) => {
                if (filename === undefined) {
                    return;
                }
                win.webContents.send(`${typeShowDialog}`, filename); // Sending Content to the Renderer Process this is a IPC
            }
        ); // end of "dialog.showOpenDialog"
        break;
    case "saveFile":
        dialog.showSaveDialog(
            {
                "title": `${typeShowDialog}`,
                "filters":
                    [
                        {
                            "name": "all",
                            "extensions": ["*"]
                        },
                        {
                            "name": "text file",
                            "extensions": ["txt", "text"]
                        },
                        {
                            "name": "html",
                            "extensions": ["htm", "html"]
                        },
                        {
                            "name": "style sheet",
                            "extensions": ["css"]
                        },
                        {
                            "name": "javascript",
                            "extensions": ["js"]
                        },
                        {
                            "name": "c++",
                            "extensions": ["cpp", "cc", "C", "cxx"],
                        },
                        {
                            "name": "json",
                            "extensions": ["json"]
                        },
                    ],
            }, // end of options: electron.SaveDialogOptions
            (filename) => {
                if (filename === undefined) {
                    return;
                }
                win.webContents.send(`${typeShowDialog}`, filename); // Sending Content to the Renderer Process this is a IPC
            }
        ); // end of "dialog.showSaveDialog"       
        break;
} // end of "switch"

}//“showDialog”结束

index.js:(使用 ipcRenderer.on(...)；我收到 ipc)

    ipcRenderer.on("openFile", (event, arg) => {
      // some sttements;
});

ipcRenderer.on("openDirectory", (event, arg) => {
     // some statements;
 });

ipcRenderer.on("saveFile", (event, arg) => {
    // some statements;
});

and this is a example about ipc