(二)electron 文件系统访问

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

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

文件系统(fs)访问

读取一个文件的内容:


<html>
  <head>
    <meta charset="UTF-8">
    <title>loadfiletitle>
  head>
  <body>
  <button id="button">loadfilebutton>
  <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>

运行结果:
(二)electron 文件系统访问_第1张图片

更多详情参考Node 文档。

electron提供的ondrop事件

我们通ondrop事件来读取文件类容。
代码如下:


<html>
  <head>
    <meta charset="UTF-8">
    <title>loadfiletitle>
  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>

结果:
(二)electron 文件系统访问_第2张图片
(二)electron 文件系统访问_第3张图片

你可能感兴趣的:(electron学习)