11. Electron 文件保存对话框功能的实现

保存对话框的操作

有了上节选择文件对话框的基础,我们再学习保存对话框dialog.showSaveDialog()就容易很多,因为他们大部分的API都是相同的,只有部分不一样,所以如果你已经掌握好了上面的内容,下面的保存对话框实现起来就变的非常容易了。接下来我们实现一个保存按钮,保存后能把固定的内容保存到文件中。

制作一个保存按钮

先在index4.html中,编写一个按钮:

<button id="saveBtn">保存文件</button>

然后在<script>标签中加入下面的代码,这时候就可以顺利的弹出保存文件对话框了,我们可以随便写一个文件名,然后会在控制台给我们返回出来结果。

var saveBtn = document.querySelector('#saveBtn');
saveBtn.onclick = function () {
    dialog.showSaveDialog({
        title: '保存文件'
    }).then(result => {
        console.log(result);
    }).catch(err => {
        console.log(err);
    })
}

看一下GIF图:

Electron 保存对话框的操作

当然上面只是让大家看看简单地实现过程,但是并没有真正的存入。

接下里我们引入Node中的fs模块,然后进行文件流的操作,就可以真的生成一个文件。

先引入fs模块。

const fs = require('fs')

然后在保存后,向文件里写入内容。

var saveBtn = document.querySelector('#saveBtn');
const fs = require('fs');
saveBtn.onclick = function () {
    dialog.showSaveDialog({
        title: '保存文件'
    }).then(result => {
        console.log(result);
        fs.writeFileSync(result.filePath,'mybj123.com');
    }).catch(err => {
        console.log(err);
    })
}

写完这一步就可以在终端中输入electron . 来打开应用,进行预览了。

Electron 选择文件与保存文件对话框功能实现

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 11. Electron 文件保存对话框功能的实现

发表评论

提供最优质的资源集合

立即查看 了解详情