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 图：