8、Electron 打开对话框、保存对话框
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(); } });
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>
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);
}
