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 ...
随机推荐
- zabbix （二）安装
一.centos7源码安装zabbix3.x 1.安装前环境搭建 下载最新的yum源 #wget -P /etc/yum.repos.d http://mirrors.aliyun.com/repo/ ...
- python3 系统监控脚本（CPU，memory，网络，disk等）
#!/usr/bin/env python3 #create at 2018-11-30 'this is a system monitor scripts' __author__="yjt ...
- nginx做反向代理时出现302错误
现象:nginx在使用非80端口做反向代理时,浏览器访问发现返回302错误 详细现象如下: 浏览器请求登录页: 输入账号密码点击登录: 很明显登录后跳转的地址少了端口号. 原因:proxy.conf文 ...
- 区间最值问题（RMQ）
题目描述 给出N个数,求第a个数到第b个数之间最大的数减去最小的数的结果 程序输入说明 N(N小于100,000),M(M小于100,000)接下来有N个数接下来M组范围,所有数均在[0,231-1] ...
- QQ 为什么以 UDP 协议为主，以 TCP 协议为辅？
QQ既有UDP也有TCP!不管UDP还是TCP,最终登陆成功之后,QQ都会有一个TCP连接来保持在线状态.这个TCP连接的远程端口一般是80,采用UDP方式登陆的时候,端口是8000. UDP协议是无 ...
- DELPHI搭建centos开发环境
DELPHI搭建centos7开发环境 关闭防火墙 搭建开发环境,还是直接关闭LINUX防火墙,省事. 否则,使用到的网络端口号,都要在防火墙开放,麻烦. systemctl disable fire ...
- TynSerial序列（还原）TFDMemTable
TynSerial序列(还原)TFDMemTable 1)TFDMemTable查询数据 procedure TForm1.Qrys(accountno, sql, sql2: string; Dat ...
- 自定义ObjectAnimator属性实现
package com.loaderman.customviewdemo; import android.animation.ObjectAnimator; import android.graphi ...
- ISO/IEC 9899:2011 条款6.2.1——标识符的作用域
6.2.1 标识符的作用域 1.一个标识符可以表示一个对象:一个函数:一个结构体.联合体或枚举的一个标签或一个成员,一个typedef名:一个标签名:一个宏名:或一个宏形参.相同的标识符可以在程序中不 ...
- ISO/IEC 9899:2011 条款6.4.4——常量
6.4.4 常量 语法 1.constant: integer-constant floating-constant enumeration-constant character-constant 约 ...