Electron 项目中实现将文件拖拽到指定区域并读取文件内容

效果图:

实现步骤:

1、首先在项目/index.html文件中定义组件容器

<div id="draw">
  <h2>File对象</h2>
  <div>推拽文件到这里</div>
  <div id="content"></div>
</div>

2、然后在项目根目录下创建一个styles文件夹,在其中创建一个index.css文件,并在其中编写容器样式

#draw {
    width: 800px;
    min-height: 500px;
    background: red;
    
}

3、然后在index.html文件中通过link标签引入外部的样式

<link rel="stylesheet" type="text/css" href="./styles/index.css">

4、然后在renderer.js文件中编写逻辑代码

renderer.js

// This file is required by the index.html file and will
// be executed in the renderer process for that window.
// No Node.js APIs are available in this process because
// `nodeIntegration` is turned off. Use `preload.js` to
// selectively enable features needed in the rendering
// process.
const fs = require('fs')


window.onload = function() {

    startDrawInit()

}

function startDrawInit() {
    const draw = document.getElementById('draw')
    const content = document.getElementById('content')
    console.log(draw)
    draw.addEventListener('drop', (e) => {
        e.preventDefault()
        const files = e.dataTransfer.files;
        console.log(files)
        if(files&&files.length>0) {
            const path = files[0].path
            console.log('path:',path)
            const text = fs.readFileSync(path).toString()
            console.log('text:',text)
            content.innerHTML = text

        }
        
    })

    draw.addEventListener('dragover',(e) => {
        e.preventDefault()
        

    })

}

5、然后即可通过以下命令运行该electron项目

如果觉得文章有帮助到你,可以扫描以下二维码
   请本文作者 喝一杯
pay_weixin pay_weixin

发表评论

电子邮件地址不会被公开。 必填项已用*标注