您的位置：首页 > Web前端 > Node.js

(二)electron 文件系统访问

2016-03-27 14:10 686 查看

由于electron是Chromium和Nodejs的组合，具备了browser的能力，前端html+css会很轻松的移植到electron成为桌面应用^_^，并且加上Node的网络访问，文件系统等等优势之后，electron让html+css的应用和平台本身的桌面应用基本无异并跨平台。

在electron中，javascript的解释实在Node环境下，因此你可以使用Node社区的模块（是不是觉得很兴奋）。

文件系统（fs）访问

读取一个文件的内容：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>loadfile</title>
</head>
<body>
<button id="button">loadfile</button>
<textarea id="content" style="width: 100%;height: 200px"></textarea>
</body>
<script>
var fs = require('fs');
var content = document.getElementById('content');
var button = document.getElementById('button');
button.addEventListener('click',function(e){
fs.readFile('package.json','utf8',function(err,data){
content.textContent = data;
console.log(data);
});
});
</script>
</html>

运行结果：

更多详情参考Node 文档。

electron提供的ondrop事件

我们通ondrop事件来读取文件类容。

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>loadfile</title>
</head>
<body>
<div id="holder" style="width: 100%;height: 200px;background: #8CA91C">
把文件拖入这里
</div>
</body>
<script>
var fs = require('fs');
var holder = document.getElementById('holder');
holder.ondragover = function () {
return false;
};
holder.ondragleave = holder.ondragend = function () {
return false;
};
holder.ondrop = function (e) {
e.preventDefault();
var file = e.dataTransfer.files[0];
fs.readFile(file.path,'utf8',function(err,data){
holder.textContent = data;
});
return false;
};
</script>
</html>

结果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： chromium node Hybrid html+css electron

相关文章推荐

新的分享

章节导航