Electron:调用H5 API
усилの博客 2022/9/24 Electron
# 文件拖拽，读取文件内容
main.js
const { app, BrowserWindow } = require("electron");
const path = require("path");
const createWindow = () => {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences:{
nodeIntegration:true, //开启渲染进程中使用nodejs
contextIsolation:false //开启渲染进程中使用nodejs In Electron 12, the default will bechanged to `true
}
});
//在渲染进程中开启调试模式
mainWindow.webContents.openDevTools()
mainWindow.loadFile(path.join(__dirname, "index.html"));
}
//监听应用的启动事件
app.on("ready", createWindow)
//监听窗口关闭的事件，关闭的时候退出应用，macOs 需要排除
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
//Macos 中点击 dock 中的应用图标的时候重新创建窗口
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h2 {
color: red;
}
.content{
width: 100%;
height: 400px;
background: orange;
overflow-y: auto;
}
</style>
</head>
<body>
<div class="content" id="content">
</div>
<script src="./renderer/index.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
./renderer/index.js
/*
https://www.w3cschool.cn/jsref/event-ondragover.html
ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop - 在一个拖动过程中，释放鼠标键时触发此事件
*/
const fs=require("fs");
window.onload=()=>{
var contentDom=document.querySelector("#content");
//阻止默认行为
contentDom.ondragenter=contentDom.ondragover=contentDom.ondragleave=()=>{
return false;
}
contentDom.ondrop=(e)=>{
// console.log(e)
console.log(e.dataTransfer.files[0].path);
var path=e.dataTransfer.files[0].path;
fs.readFile(path,(err,data)=>{
if(err){
console.log(err);
return false;
}
contentDom.innerHTML=data
})
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
