主进程：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();
}
});加载了文件index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/base.css"> </head> <body> <div id="content"> </div> <script src="./renderer/index.js"></script> </body> </html>
渲染进程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
})
}
}
川公网安备 51010702003150号
留下您的脚步
最近评论