Electron呼叫h5的拖放api 結合nodejs fs實現拖放開啟檔案功能
阿新 • • 發佈：2020-11-27
新建render/index.js
// 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; }) }
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .content{ width: 100%; height: 400px; background: orange; overflow-y: auto; } </style> </head> <body> <div class="content" id="content"> </div> <script src="renderer/index.js"></script> </body> </html>
執行專案：
npm run start