学习electron第八章保存文件对话框

electron 版本号 v15.3.0

第一步

修改demo4.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>
    <button id="saveBtn">保存</button>
    <img id="images" style="width: 100%"/>
</body>
<script>
    const {dialog} = require("@electron/remote")
    var fs = require('fs')
    var openBtn = document.querySelector("#openBtn")
    openBtn.onclick = function(){
        dialog.showOpenDialog({
            // 标题
            title:'打开图片',
            // 默认赋值
            defaultPath:'9.jpg',
            // 过滤器,name 后面的值随便写 extensions 里面写允许上传的类型
            filters:[{
                name:'image',
                extensions:['jpg']
            }],
            buttonLabel:'选择图片'
        }).then(result => {
            console.log(result)
            let image = document.querySelector("#images")
            image.setAttribute("src", result.filePaths[0])
        }).catch(err => {
            console.log(err)
        })
    }

    var saveBtn = document.querySelector("#saveBtn")
    saveBtn.onclick = function(){
        dialog.showSaveDialog({
            title:'保存文件'
        }).then(result => {
            var saveText = "保存的内容123129891823981239"
            fs.writeFileSync(result.filePath, saveText)
        }).catch(err => {
            console.log(err)
        })
    }
</script>
</html>

第二步

验证测试

electron .

出现以下内容则代表成功

image.png

红色代表本次修改或新增的内容

image.png