electron node.js 实现文件拖动读取文件
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 的错误。
electron node.js 实现文件拖动读取文件的更多相关文章
- 在 Node.js 中处理大 JSON 文件
在 Node.js 中处理大 JSON 文件 场景描述 问题一: 假设现在有一个场景,有一个大的 JSON 文件,需要读取每一条数据经过处理之后输出到一个文件或生成报表数据,怎么能够流式的每次读取一条 ...
- node.js使用express框架进行文件上传
关于node.js使用express框架进行文件上传,主要来自于最近对Settings-Sync插件做的研究.目前的研究算是取得的比较好的进展.Settings-Sync中通过快捷键上传文件,其实主要 ...
- electron node.js 在 vscode 设置 调试 Debug
在当前工程下,添加一个 .vscode/launch.json 文件 { // Use IntelliSense to learn about possible attributes. // Hove ...
- 文件_ _android从资源文件中读取文件流并显示的方法
======== 1 android从资源文件中读取文件流并显示的方法. 在android中,假如有的文本文件,比如TXT放在raw下,要直接读取出来,放到屏幕中显示,可以这样: private ...
- PHP 上传文件和读取文件崎岖路
今天php上传文件和读取文件没有搞出来,全靠后来大神来帮忙,总结一下:主要涉及到一下几个方面,在ubuntu下mkdir文件夹的时候要注意权限问题,一般情况下php是以一个较低的权限去执行的,所以如果 ...
- 【转】c# winform 创建文件，把值写入文件，读取文件里的值，修改文件的值，对文件的创建，写入，修改
创建文件和读取文件的值 #region 判断文件是否存在,不存在则创建,否则读取值显示到窗体 public FormMain() { InitializeComponent(); //ReadFile ...
- 【Node.js】'readline' 逐行读取、写入文件内容
[转]运用readline逐行读取的两种实现 效果图如下: 左边1.log 为源文件 右边1.readline.log为复制后的文件 下边为命令行输出 实现方式一: [javascript] view ...
- node.js 中的 fs （文件）模块
记录 fs 模块的方法及使用 1. fs.stat 获取文件大小,创建时间等信息 // 引入 fs 模块 const fs = require('fs'); fs.stat('01.fs.js', ( ...
- Node.js核心模块API之文件操作
参考:https://www.runoob.com/nodejs/nodejs-fs.html 异步I/O 1,文件操作 2,网络操作 在浏览器中也存在异步操作 1,定时任务 2,事件处理 3,Aja ...
随机推荐
- Bootstap学习的实用网站
基本CSS样式 http://v2.bootcss.com/base-css.html 93 Twitter Bootstrap HTML Templates https://shapebootstr ...
- 使用 ServerSocket 建立聊天服务器-2
1. 从serverListener中可以看出,每一个客户端创建新的请求之后,都会把它分配给一个独立的chatsocket ,但是每一个ChatSocket都是相互独立的,他们之间并不能沟通,所以要新 ...
- mysql中 where与having的区别
having子句与where有相似之处但也有区别,都是设定条件的语句.在查询过程中聚合语句(sum,min,max,avg,count)要比having子句优先执行.而where子句在查询过程中执行优 ...
- 2017杭电ACM集训队单人排位赛 - 2 题解
1001,水题,直接模拟即可.比赛中开局连wa三发,因为把int写成了bool.. 1002,积分题,比赛中找到了下面这个积分公式, 但是并没什么用,,因为带入以后存在误差,估计是展开了以后出现了误差 ...
- (转)Linux 磁盘IO性能测试
Linux 如何测试 IO 性能(磁盘读写速度) 这几天做MySQL性能测试,偌大一个公司,找几台性能测试机器都很纠结,终于协调到两台,IO的性能如何还不知道.数据库属于IO密集型的应用,所以还是先评 ...
- mysql中查询某个字段重复的数据
SELECT corp_name,count(*) as sums FROM corp_tax WHERE corp_year = 2018 AND corp_month = 8 group by c ...
- TripleDES加解密Java、C#、php
TripleDES说明: TripleDES(3Des)和Des都是对称加密算法,TripleDes是Des加密算法的增强版本,这里主要说的是TripleDes加密算法的应用. 工作中 ...
- Java 面向对象（十四）
反射 反射是框架设计的灵魂 一.类的加载时机 当程序要使用某个类时,如果该类还未被加载到内存中,系统会通过加载,连接,初始化三步来实现对这个类进行初始化. 加载 :就是指将class文件读入内存,并为 ...
- Git的概念和基本使用
概念篇 1. Git简介: 鉴于有些同学可能还不知道Git是什么,我首先对Git做个简短的介绍.Git就是类似于svn的一个版本控制工具,他其实和hg更像一些,hg也是一个分布式版本控制工具,可以说g ...
- 如果前面的IO操作出问题了，按照我们代码的意思，不就try catch 了吗，这样的话线程就没关闭了，就会造成线程泄露。 那怎么解决这个问题呢，其实也简单，把关闭线程的方法写到finally里就可以了。
https://mp.weixin.qq.com/s/WaNVT2bZFGHNO_mb5nK6vw 连HDFS源码大神都会犯的错之线程泄露(1) 西瓜老师 西瓜老师爱大数据 1月11日