Electron学习笔记 - 拖拽打开/显示文件内容

这次我们来实时一个功能 - 拖拽打开/显示文件内容。例：在文件夹窗口将package.json文件拖拽至我们的应用程序，即可在指定框里显示该文件内容。就如同将某个文件拖拽至记事本，记事本即显示该文件内容。

本例通过调用H5文档里拖拽的API来实现。

一、index.html增加div框

修改内容如下：

1. div content即将要显示文件内容
2. drag.js为实现本例的脚本

二、drag.js脚本实现

1. 拖拽事件为ondrop
2. 在ondrop事件里，通过访问dataTransfer.file[0].path，获得路径和文件名
3. 通过上述路径和文件名，将文件内容在div框内显示

在下面网站可以查到常见的拖拽事件
https://www.w3cschool.cn/jsref/event-ondrag.html

截屏2022-02-13 下午7.02.06.png

/*
该脚本用于实现拖拽打开文件的效果
    https://www.w3cschool.cn/jsref/event-ondrag.html
    ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
    ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
    ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
    ondrop - 在一个拖动过程中，释放鼠标键时触发此事件
*/

const fs = require("fs");

window.onload=()=> {
    var contentDom = document.querySelector("#content");

    //阻止相关事件默认行为
    contentDom.ondragcenter = contentDom.ondragover = contentDom.ondragleave = ()=>{
        return false;
    }

    //对拖动释放事件进行处理
    contentDom.ondrop=(e)=> {
        //console.log(e);
        var filePath = e.dataTransfer.files[0].path
        console.log(filePath);
        fs.readFile(filePath,(err,data)=>{
            if (err) {
                console(err);
                return;
            }
            contentDom.innerHTML = data.toString();
        })
    }
}

三、最终效果

如图所示：

截屏2022-02-12 下午10.14.25.png

最后更新日期：2022年2月13日