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 图:
当然上面只是让大家看看简单地实现过程,但是并没有真正的存入。
接下里我们引入 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 .
来打开应用,进行预览了。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 11. Electron 文件保存对话框功能的实现
码云笔记 » 11. Electron 文件保存对话框功能的实现