index.js
/**
* 打开对话框：最简单的打开对话框
*
* Dialog.showOpenDialog([browserWindow,]options[,callback])
* browserWindow参数允许对话框将自身附加到父窗口，作为父窗口的模态对话框。
* callback:返回选中的文件或路径，如果不指定该参数，选中的文件和目录的路径会通过showOpenDialog方法的返回值返回
* options:
* 1、title String 对话框的标题(Windows)
* 2、dafaultPath String 默认的路径
* 3、buttonLabel String 按钮文本（Open）
* 4、filters:Array 过滤器，用于过滤指定类型的文件
* 5、properties:Array 包含对话框的功能，如打开文件、打开目录、多选
* 6、message String 对话框的标题 （Mac OS X）
*
* 打开对话框：定制对话框
* title、buttonLabel、dafaultPath
*
* 打开对话框:选择指定类型的文件
* filters:对象类型的数组
*
* 打开对话框:选择和创建目录
* openDirectory
* createDirectory 只在Mac才有用
*
* 打开对话框:选择多个文件和目录
* openFile、openDirectory
* multiSelections
* 如果同时选择多个文件和目录，Mac和Windows的设置方法不同
* Mac:如果想同时选择多个文件和目录，需要指定openFile和openDirectory
* Windows:只需要指定openFile,就可以选择文件和目录
* 如果在Windows下指定了openDirectory，不管是否指定openFile,都只能选择目录
*
* 打开对话框：通过回调函数返回选择结果
*
* 保存对话框:
* showSaveDialog showOpenDialog
*
*/
const {app,BrowserWindow} = require('electron');
function createWindow(){
win = new BrowserWindow({
//show:false,
webPreferences:{
nodeIntegration: true, // 是否集成 Nodejs
enableRemoteModule: true,
contextIsolation: false,
}
});
win.loadFile('index.html');
win.on("ready-to-show",()=>{
win.show();
});
if(process.platform!="darwin"){
win.setIcon("images\\logn.jpg");
}
win.on('closed',()=>{
console.log('closed')
win=null;
});
}
app.on('ready',createWindow);
app.on('window-all-closed',()=>{
console.log('window-all-closed');
if(process.platform!='darwin'){
}
});
app.on('activate',()=>{
console.log('activate');
if(win==null){
createWindow();
}
});
View Code
index.html
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>打开对话框</title>
<script src="event.js"></script>
<body>
<button onclick="onClick_OpenFile()">打开文件</button>
<br/>
<button onclick="onClick_CustomOpenFile()">打开定制对话框</button>
<br/>
<button onclick="onClick_FileType()">选择文件类型</button>
<br/>
<button onclick="onClick_Directory()">选择目录</button>
<br/>
<button onclick="onClick_MultiSelection()">多选（文件和目录）</button>
<br/>
<button onclick="onClick_CallBack()">通过回调函数返回选择结果</button>
<br/>
<button onclick="onClick_Save()">保存对话框</button>
<br/>
<label id="label"></label>
</body>
</html>
View Code
event.js
const remote = window.require('electron').remote;
const dialog =remote.dialog;
//打开文件
function onClick_OpenFile()
{
const label=document.getElementById("label");
var p= dialog.showOpenDialog({properties:['openFile']}).then(result=>{
console.info("result.canceled",result.canceled)
console.info("result.filePaths",result.filePaths)
label.innerText=result.filePaths[0];
}).catch(err=>{
console.info("err",err);
});
}
//打开定制对话框
function onClick_CustomOpenFile()
{
const label=document.getElementById("label");
var options={};
options.title="打开文件";//设置Windows标题
options.message="打开文件";//设置Mac OS X标题
options.buttonLabel="选择";
options.dafaultPath="F:/BaiduNetdiskDownload/"//未成功
options.properties=['openFile'];
var p= dialog.showOpenDialog(options).then(result=>{
console.info("result.canceled",result.canceled)
console.info("result.filePaths",result.filePaths)
label.innerText=result.filePaths[0];
}).catch(err=>{
console.info("err",err);
});
}
//选择文件类型
function onClick_FileType()
{
const label=document.getElementById("label");
var options={};
options.title="选择文件类型";//设置Windows标题
options.message="选择文件类型";//设置Mac OS X标题
options.buttonLabel="选择";
options.properties=['openFile'];
options.filters=[
{name:"图片文件",extensions:['jpg','bmp','npg','gif']},
{name:"视频文件",extensions:['avi','mp4']},
{name:"所有文件（*.*）",extensions:['*']},
];
var p= dialog.showOpenDialog(options).then(result=>{
console.info("result.canceled",result.canceled)
console.info("result.filePaths",result.filePaths)
label.innerText=result.filePaths[0];
}).catch(err=>{
console.info("err",err);
});
}
//选择目录、创建目录（Mac）
function onClick_Directory()
{
const label=document.getElementById("label");
var options={};
options.title="选择目录";//设置Windows标题
options.message="选择目录";//设置Mac OS X标题
options.buttonLabel="选择";
options.properties=['openDirectory','createDirectory'];
var p= dialog.showOpenDialog(options).then(result=>{
console.info("result.canceled",result.canceled)
console.info("result.filePaths",result.filePaths)
label.innerText=result.filePaths[0];
}).catch(err=>{
console.info("err",err);
});
}
//多选（文件和目录）
function onClick_MultiSelection()
{
const label=document.getElementById("label");
var options={};
options.title="多选（文件和目录）";//设置Windows标题
options.message="多选（文件和目录）";//设置Mac OS X标题
options.buttonLabel="选择";
options.properties=[
'openFile',
//'openDirectory',
'createDirectory','multiSelections'];
var p= dialog.showOpenDialog(options).then(result=>{
console.info("result.canceled",result.canceled)
console.info("result.filePaths",result.filePaths)
label.innerText=result.filePaths[0];
}).catch(err=>{
console.info("err",err);
});
}
//通过回调函数返回选择结果
function onClick_CallBack()
{
const label=document.getElementById("label");
var options={};
options.title="通过回调函数返回选择结果";//设置Windows标题
options.message="通过回调函数返回选择结果";//设置Mac OS X标题
options.buttonLabel="选择";
options.properties=['openFile','createDirectory','multiSelections'];
if(process.platform=="darwin"){
options.properties.push('openDirectory');
}
var p= dialog.showOpenDialog(options,(filePaths)=>{
console.info("filePaths",filePaths)
}).then(result=>{
console.info("result.canceled",result.canceled)
console.info("result.filePaths",result.filePaths)
for(var i=0;i<result.filePaths.length;i++){
label.innerText+=result.filePaths[i]+'\r\n';
}
}).catch(err=>{
console.info("err",err);
});
}
//保存对话框
function onClick_Save()
{
const label=document.getElementById("label");
var options={};
options.title="保存对话框";//设置Windows标题
options.message="保存对话框";//设置Mac OS X标题
options.buttonLabel="保存";
options.defaultPath=".";
options.nameFieldLabel="文件名："
options.filters=[
{name:"图片文件",extensions:['jpg','bmp','npg','gif']},
{name:"视频文件",extensions:['avi','mp4']},
{name:"所有文件（*.*）",extensions:['*']},
]
var p= dialog.showSaveDialog(options).then(result=>{
console.info("result.canceled",result.canceled)
console.info("result.filePaths",result.filePaths)
for(var i=0;i<result.filePaths.length;i++){
label.innerText+=result.filePaths[i]+'\r\n';
}
}).catch(err=>{
console.info("err",err);
});
console.info("p",p);
}View Code
