Electron second
Select file dialog: dialog.showopenDialog ()
- There are two arguments, one for setting basic properties and one for calling back functions, if one can be implemented using then
Small example;
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
< meta name = "viewport" content = "width = device - width, initial - scale = 1.0" >
<title>Hello Electron</title>
</head>
<body>
<button id="openBtn"> open file </button>
<img id="images" style="width: 100%;" />
<script>
const {
dialog
} = require('electron').remote;
var openBtn = document.getElementById('openBtn')
openBtn.onclick = function() {
dialog.showOpenDialog({
Title: 'Please choose the photo you like ',
// The default path, the default selected file
defaultPath: 'default.jpg',
// Filter file suffixes
filters: [{
name: 'img',
extensions: ['jpg', 'png']
}].
// Open the button
ButtonLabel: 'Open button text ',
// The callback results are rendered to the IMG tag
}).then(result => {
let image = document.getElementById('images')
image.setAttribute("src", result.filePath[0])
}).catch(err => {
console.log(err)
})
}
</script>
</body>
</html>
Copy the codeShowOpenDialog triggers file selection, and then the default file, filter file suffixes, open button customization, callback render, and so on
Save the file
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
< meta name = "viewport" content = "width = device - width, initial - scale = 1.0" >
<title>Hello Electron</title>
</head>
<body>
<button id="openBtn"> open file </button>
<button id="saveBtn"> Save file </button>
<img id="images" style="width: 100%;" />
<script>
const fs = require('fs')
var saveBtn = document.getElementById('saveBtn')
saveBtn.onclick = function() {
dialog.showSaveDialog({
Title: 'Save file'
}).then(result => {
console.log(result)
fs.writeFileSync(result.filePath, 'baocunde.js')
}).catch(err => {
console.log(err)
})
}
</script>
</body>
</html>
Copy the codeShowSaveDialog, select the file, the callback will give you a filename, and then use fs.writefilesync (file name, file content).
Message dialog box
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
< meta name = "viewport" content = "width = device - width, initial - scale = 1.0" >
<title>Hello Electron</title>
</head>
<body>
<button id="messageBtn"> Save file </button>
<img id="images" style="width: 100%;" />
<script>
const {
dialog
} = require('electron').remote;
const fs = require('fs')
var messageBtn = document.getElementById('messageBtn')
messageBtn.onclick = function() {
dialog.showMessageBox({
Title: 'Select a button ',
type: 'warning',
Message: 'Want to eat?'
Buttons: [' go ', 'don't go ']
}).then(result => {
if (result == 0) {
Console. log(' User clicked to go ')
}
}).catch(err => {
console.log(err)
})
}
</script>
</body>
</html>
Copy the codeDialog. showMessageBox displays a selection box. Buttons are an array of options, and clicking on them returns the subscripts in the array