文档章节

electron node.js 实现文件拖动读取文件

o
 osc_zoa3moe9
发布于 2019/12/07 13:51
字数 552
阅读 7
收藏 0

精选30+云产品,助力企业轻松上云!>>>

css/styles.css

1 .for_file_drop {
2     width: 100%;
3     height: 100px;
4     background-color: blueviolet;
5 }
View Code

 

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>
View Code

 

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);
}
View Code

 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.
View Code

其中的第16行是重点,否则使用process时会出现:process is not defined  的错误。

 

o
粉丝 1
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
Electron-如何保护源码?

一开始听到这个需求挺懵的,作为一个聊天软件,代码里并没有所谓核心算法和商业机密,为什么需要保护源码。况且Electron本身在打包时提供了这种archive文件格式,会将所有源码和依赖封装。 ...

Charles0427
2019/02/18
0
0
用Electron创建跨平台应用(第一弹)

用Electron创建跨平台应用连载目录: 用Electron创建跨平台应用(第一弹) 用Electron创建跨平台应用(第二弹)开启多窗口 用Electron创建跨平台应用(第三弹)开启系统通知 Electron是GitHub开发的...

木子昭
2018/08/27
0
0
Electron/Nodejs开发笔记-功能问题记录及指南

这篇随笔记录一下electron + vue与nodejs 的一些开发的过程和问题..随缘更新 最近基于Electron做一个针对UE4应用的进程守护和更新启动器... 花费大量了时间的处理来UI线程堵塞的问题上了(吐...

osc_ndbtoukb
2019/12/10
12
0
发给自己和各位的鼠年压岁钱,使用electron-vue实现微信小程序云开发数据库批量导入

为实现"微信小程序云开发"数据库文件批量导入(官方工具仅支持单文件导入),学习electron,过年趁机开心一波,使用electron-vue实现微信小程序云开发数据库文件(夹)批量导入工具。 项目展示 ...

十先生
01/25
0
0
Electron中实现大文件上传和断点续传功能

Electron官网的描述:Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中,并将其打包为M...

码农码代码
2018/10/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

PO设计模式-实现移动端自动化测试

开发环境:python 3.6.5 + selenium 2.48.0 + pytest框架 + Android 5.1 工具:pycharm + Appium + Genymotion 测试机型:Samsung Galaxy S6 #需求:设计3个测试用例#1.实现点击设置->显示-...

osc_cl1ufvfd
15分钟前
6
0
Android之TabLayout和ViewPager组合跳转到指定页面

1 问题 TabLayout和ViewPager组合跳转到具体一个页面 2 解决办法 viewPager?.setCurrentItem(index) index为0说明是第一页,如果是1的话就是第二页,以此类推。...

osc_w4g8kpwc
17分钟前
9
0
Android之解决多语言适配部分TextView内容左对齐和内容一行不排满就到第二行问题

1 问题 1、多语言适配部分TextView内容左对齐 2、内容一行不排满就到第二行问题 2 解决办法 问题1、在TextView里面加入下面参数 android:gravity="center" 问题2、 import android.conte...

osc_u61lmlkv
17分钟前
17
0
SpringBoot2.0+Shiro+MyBatisPlus权限管理系统

项目描述 Hi,大家好,今天分享的项目是《SpringBoot+Shiro权限管理系统》,这是一个SpringBoot+Layui后台管理系统,使用Shiro安全框架,加入访问权限,对不同角色有不同的访问权限,其他管理...

ericxu1116
19分钟前
19
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部