该博客展示了如何在 Electron 应用中利用 `@electron/remote` 模块实现文件打开和保存对话框。通过点击按钮，用户可以打开图片并显示在页面上，同时提供一个保存文件的功能，将指定内容保存到用户选择的路径。
保存对话框dialog.showSaveDialog()
1 修改 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' type="">打开图片</button>
<button id='saveBtn' type="">保存文件</button>
<img id='images' style="width: 100%;"/>
<script>
const {dialog} = require('@electron/remote')
var fs=require('fs')
var openBtn=document.getElementById('openBtn')
openBtn.οnclick=()=>{
dialog.showOpenDialog({
title:'请选择你喜欢的小姐姐照片',
defaultPath:'xiaojiejie.jpeg',
filters:[{
name:'img',
extensions:['jpeg']
}],
buttonLabel:'打开小姐姐'
}).then(result=>{
let images=document.getElementById('images')
images.setAttribute('src',result.filePaths[0])
}).catch(err=>{
console.log(err)
})
}
var saveBtn=document.getElementById('saveBtn')
saveBtn.οnclick=()=>{
dialog.showSaveDialog({
title:'保存文件'
}).then(result=>{
console.log(result)
fs.writeFileSync(result.filePath,'xiaojiejie')
}).catch(err=>{
console.log(err)
})
}
</script>
</body>
</html>
2 运行程序
扫一扫
1245
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
