[英]Filter by extension in Electron file dialog
如何在“電子文件”對話框中按擴展名添加過濾器。 例如:
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
}
})
}
第一步:你必須從(主進程)main.js發送一個IPC到(渲染進程)index.js。 有關詳細信息, 閱讀本 , 這個和這個 。
第二步:現在你可以處理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;
});
您可以根據需要為選項對象添加任意數量的過濾器。 您只需要確保不要多次添加它們 - 因為沒有檢查唯一性。
的index.html
<!DOCTYPE html>
<html>
<body>
<button id="importWallet">Import wallet</button>
<script src="./index.js"></script>
</body>
</html>
index.js
const app = require("electron").remote;
const fs = require("fs");
const dialog = app.dialog;
//customize this one as you like
const dialogOptions = {
defaultPath: "c:/",
filters: [
{ name: "All Files", extensions: ["*"] },
{ name: "Images", extensions: ["jpg", "png", "gif"] },
{ name: "Movies", extensions: ["mkv", "avi", "mp4"] }
],
properties: ["openFile"]
};
document.getElementById("importWallet").onclick = () => {
const unicornFilter = dialogOptions.filters.find(item => {
if (item.name === "Unicorn") {
return item;
} else {
return undefined;
}
});
if (!unicornFilter) {
const myUnicornFilter = {
name: "Unicorn",
extensions: ["unicorn", "horse"]
};
dialogOptions.filters.push(myUnicornFilter);
}
dialog.showOpenDialog(dialogOptions, fileName => {
if (fileName !== undefined) {
console.log(fileName);
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;
}
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.