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();
    }
});
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]+'
';
        }
    }).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]+'
';
        }
    }).catch(err=>{
        console.info("err",err);
    });
    console.info("p",p);
}
View Code
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/xiaoruilin/p/14802443.html