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 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 的错误。