第二章:Electron使用node读取文件&结合调用h5的拖放api 实现拖放打开文件功能

使用node.js读取文件

  • 在主进程中添加支持node的功能

     mainWindow = new BrowserWindow(
            {
                width: 1280,//设置打开的窗口大小
                height: 720,//设置打开的窗口大小
                webPreferences: { nodeIntegration: true }//使用node功能
            }
        )
    
  • js调用
    在这里插入图片描述

    var fs = require('fs')
    window.onload=function(){
        var btn=this.document.querySelector('#btn_txt')
        var myTest1=this.document.querySelector('#myTest1')
        btn.onclick=function(){
            fs.readFile('test1.txt',(err,data)=>{
                myTest1.innerHTML=data
            })
        }
    }
    
  • 调用

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
      </head>
      <body>
        <button id="btn_txt">读取test.txt内容</button>
        <div id="myTest1"></div>
        <script src="render/readfile.js"></script>
      </body>
    </html>
    
    

在这里插入图片描述

结合调用h5的拖放api 实现拖放打开文件功能

<style>
    .content {
      width: 100%;
      height: 400px;
      background: orange;
      overflow-y: auto;
    }
  </style>
 <div class="content" id="content">


  </div>
  <script src="render/h5readfile.js"></script>

// html5拖放api:http://www.runoob.com/jsref/event-ondragover.html

/*

释放目标时触发的事件:
ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop - 在一个拖动过程中,释放鼠标键时触发此事件


*/

var fs=require('fs');


var content=document.querySelector('#content');

content.ondragenter=content.ondragover=content.ondragleave=function(){

    return false; /*阻止默认行为*/
}


content.ondrop=function(e){

    //阻止默认行为

    e.preventDefault();     

    console.log(e.dataTransfer.files[0]);

    var path=e.dataTransfer.files[0].path;


    fs.readFile(path,'utf-8',(err,data)=>{

        if(err){
            console.log(err);

            return false;
        }
        content.innerHTML=data;
    })

}



©️2020 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页