如何在 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
}
})
}
最佳答案
第一步:您必须将 IPC 从(主进程)main.js 发送到(渲染进程)index.js。更多详情 read this , this和 this .
第二步:现在您可以处理 openFile 或 openDirectory 或 ...
一个例子(我的代码):
main.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;
});
关于javascript - 在 Electron 文件对话框中按扩展名过滤，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48453065/