chenyijun 2019-12-07
css/styles.css
.for_file_drop { width: 100%; height: 100px; background-color: blueviolet; }
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> <link rel="stylesheet" href="css/styles.css" /> </head> <body> <h1>Hello World!</h1> We are using Node.js <span id="node-version"></span>, Chromium <span id="chrome-version"></span>, and Electron <span id="electron-version"></span>. <div> <h1>Process information</h1> <button onclick="getProcessInfo()">查询系统信息</button> </div> <div class="for_file_drop" id="drag_test"> <h2>文件拖动到此处</h2> <span></span> </div> <!-- You can also require other files to run in this process --> <script src="./renderer.js"></script> </body> </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
// Modules to control application life and create native browser window const {app, BrowserWindow} = require(‘electron‘) const path = require(‘path‘) // Keep a global reference of the window object, if you don‘t, the window will // be closed automatically when the JavaScript object is garbage collected. let mainWindow function createWindow () { // Create the browser window. mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, ‘preload.js‘), nodeIntegration: true // 注入node模块 } }) // and load the index.html of the app. mainWindow.loadFile(‘index.html‘) // Open the DevTools. // mainWindow.webContents.openDevTools() // Emitted when the window is closed. mainWindow.on(‘closed‘, function () { // Dereference the window object, usually you would store windows // in an array if your app supports multi windows, this is the time // when you should delete the corresponding element. mainWindow = null }) } // This method will be called when Electron has finished // initialization and is ready to create browser windows. // Some APIs can only be used after this event occurs. app.on(‘ready‘, createWindow) // Quit when all windows are closed. app.on(‘window-all-closed‘, function () { // On macOS it is common for applications and their menu bar // to stay active until the user quits explicitly with Cmd + Q if (process.platform !== ‘darwin‘) app.quit() }) app.on(‘activate‘, function () { // On macOS it‘s common to re-create a window in the app when the // dock icon is clicked and there are no other windows open. if (mainWindow === null) createWindow() }) // In this file you can include the rest of your app‘s specific main process // code. You can also put them in separate files and require them here.
其中的第16行是重点,否则使用process时会出现:process is not defined 的错误。