10. Electron 选择文件对话框功能的实现

这节开始带大家学习Electron下的对话框操作,对话框一般会有选择文件对话框,保存文件对话框和确认对话框,本文我们就来学习文件选择对话框和保存文件对话框的相关操作。

话框相关API讲解

我们先来看一下打开对话框的相关API,打开文件选择对话框可以使用dialog.showOpenDialog()方法来打开,它有两个参数,一个是设置基本属性,另一个是回调函数,如果是异步可以使用then来实现。

  • title : String (可选),对话框的标题
  • defaultPath : String (可选),默认打开的路径
  • buttonLabel : String (可选), 确认按钮的自定义标签,当为空时,将使用默认标签
  • filters : 文件选择过滤器,定义后可以对文件扩展名进行筛选
  • properties :打开文件的属性,比如打开文件还是打开文件夹,甚至是隐藏文件。

对基本的API了解以后,就可以写代码看看具体的效果了。

选择对话框练习

在根目录新建一个index4.html文件,然后编写一个按钮,点击按钮可以打开窗口选择文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="openBtn">打开文件</button>
    <img id="images" style="width: 100%;" />
    
    <script>
        const {dialog} = require('electron').remote;
        var openBtn = document.querySelector('#openBtn');
        openBtn.onclick = function () {
            dialog.showOpenDialog({
                title: '请选择你喜欢的宠物'
            })
        }
    </script>
</body>
</html>

写完后记得把main.js中的引入页面改成index4.html代码如下:

mainWindow.loadFile('index4.html');

使用electron . 预览一下,可以看到,已经可以顺利打开文件选择窗口了。

默认路径的设置

这时打开的窗口是没有默认文件的,比如我们想直接定位到美女文件mv.jpg,就可以用defaultPath来进行制作。 代码如下:

dialog.showOpenDialog({
    title:'请选择你喜欢的宠物照片',
    defaultPath:'mv.jpg'
})

electron默认路径的设置

过滤器的使用

现在程序还是可以看到很多其他的文件,我们的原则就是想选择一个美女照片,然后显示在界面上,这时候就需要用到过滤器了。

openBtn.onclick = function(){
    dialog.showOpenDialog({
        title:'请选择你喜欢的宠物照片',
        defaultPath:'mv.jpg',
        filters:[
            {name:'jpg',extensions:['jpg']}
        ]
    })
}

electron过滤器的使用

从上图我们看到此时已经过滤到很多其他的文件。

自定义确定按钮

可以直接使用buttonLabel来自定义确定按钮的文字,比如现在把文字改成’打开图片’。

dialog.showOpenDialog({
    title:'请选择你喜欢的宠物照片',
    defaultPath:'mv.jpg',
    filters:[
        {name:'jpg',extensions:['jpg']}
    ],
    buttonLabel:'打开图片',
})

electron自定义确定按钮

把美女放到应用中

当我们选择到了一个文件后,showOpenDialog()提供了回调函数,也就是我们的第二个参数。现在来看一下回调函数如何获得图片路径。

const {dialog} = require('electron').remote;
var openBtn = document.querySelector('#openBtn');
openBtn.onclick = function () {
    dialog.showOpenDialog({
        title: '请选择你喜欢的宠物照片',
        defaultPath: 'mv.jpg',
        filters: [{name:'jpg',extensions:['jpg']}],
        buttonLabel: '打开图片'
    }).then(result => {
        // console.log(result);
        let image = document.querySelector("#images");
        image.setAttribute('src', result.filePaths[0]);
    }).catch(err => {
        console.log(err);
    })
}

这样完成了选择照片,并显示在界面上的功能,

Electron 选择文件对话框的使用

有的小伙伴这时候就会问了,我用html的选择文件也可以实现这个效果,确实是可以实现的,但我认为既然用了Electron就最好使用原生的形式打开。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » 10. Electron 选择文件对话框功能的实现

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们