(二)electron 文件系统访问

最新推荐文章于 2024-04-18 01:10:13 发布

此心勿动

最新推荐文章于 2024-04-18 01:10:13 发布

阅读量1.4w

点赞数 2

分类专栏： electron学习文章标签： chromium node Hybrid html+css electron

本文链接：https://blog.csdn.net/ch15196637370/article/details/50991537

版权

electron学习专栏收录该内容

5 篇文章 1 订阅

订阅专栏

由于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>

结果：

此心勿动

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
(二)electron 文件系统访问

由于electron是Chromium和Nodejs的组合，具备了browser的能力，前端html+css会很轻松的移植到electron成为桌面应用^_^，并且加上Node的网络访问，文件系统等等优势之后，electron让html+css的应用和平台本身的桌面应用基本无异并跨平台。在electron中，javascript的解释实在Node环境下，因此你可以使用Node社区的模块（是不是觉得很
复制链接

扫一扫