css/styles.css
1 .for_file_drop {
2 width: 100%;
3 height: 100px;
4 background-color: blueviolet;
5 }
index.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 6 <title>Hello World!</title> 7 <link rel="stylesheet" href="css/styles.css" /> 8 </head> 9 <body> 10 <h1>Hello World!</h1> 11 We are using Node.js <span id="node-version"></span>, 12 Chromium <span id="chrome-version"></span>, 13 and Electron <span id="electron-version"></span>. 14 15 16 <div> 17 <h1>Process information</h1> 18 <button onclick="getProcessInfo()">查询系统信息</button> 19 </div> 20 21 <div class="for_file_drop" id="drag_test"> 22 <h2>文件拖动到此处</h2> 23 <span></span> 24 </div> 25 <!-- You can also require other files to run in this process --> 26 <script src="./renderer.js"></script> 27 28 29 30 </body> 31 </html>
renderer.js
const fs = require("fs");
const dragWrapper = document.getElementById("drag_test");
dragWrapper.addEventListener("drop",(e)=>{
e.preventDefault(); //阻止e的默认行为
const files = e.dataTransfer.files;
if (files && files.length>=1){
const path = files[0].path;
console.log("file:",path);
const content = fs.readFileSync(path);
console.log(content.toString());
}
})
//这个事件也需要屏蔽
dragWrapper.addEventListener("dragover",(e)=>{
e.preventDefault();
})
function getProcessInfo(){
console.log("Cpu Usage:", process.getCPUUsage());
console.log("env",process.env);
console.log("arc",process.arch);
}
main.js
1 // Modules to control application life and create native browser window
2 const {app, BrowserWindow} = require(‘electron‘)
3 const path = require(‘path‘)
4
5 // Keep a global reference of the window object, if you don‘t, the window will
6 // be closed automatically when the JavaScript object is garbage collected.
7 let mainWindow
8
9 function createWindow () {
10 // Create the browser window.
11 mainWindow = new BrowserWindow({
12 width: 800,
13 height: 600,
14 webPreferences: {
15 preload: path.join(__dirname, ‘preload.js‘),
16 nodeIntegration: true // 注入node模块
17 }
18 })
19
20 // and load the index.html of the app.
21 mainWindow.loadFile(‘index.html‘)
22
23 // Open the DevTools.
24 // mainWindow.webContents.openDevTools()
25
26 // Emitted when the window is closed.
27 mainWindow.on(‘closed‘, function () {
28 // Dereference the window object, usually you would store windows
29 // in an array if your app supports multi windows, this is the time
30 // when you should delete the corresponding element.
31 mainWindow = null
32 })
33 }
34
35 // This method will be called when Electron has finished
36 // initialization and is ready to create browser windows.
37 // Some APIs can only be used after this event occurs.
38 app.on(‘ready‘, createWindow)
39
40 // Quit when all windows are closed.
41 app.on(‘window-all-closed‘, function () {
42 // On macOS it is common for applications and their menu bar
43 // to stay active until the user quits explicitly with Cmd + Q
44 if (process.platform !== ‘darwin‘) app.quit()
45 })
46
47 app.on(‘activate‘, function () {
48 // On macOS it‘s common to re-create a window in the app when the
49 // dock icon is clicked and there are no other windows open.
50 if (mainWindow === null) createWindow()
51 })
52
53 // In this file you can include the rest of your app‘s specific main process
54 // code. You can also put them in separate files and require them here.
其中的第16行是重点，否则使用process时会出现：process is not defined 的错误。
原文地址：https://www.cnblogs.com/abc789/p/12001467.html
时间： 2024-07-28 15:33:17