前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Electron拖拽下载能力

Electron拖拽下载能力

原创
作者头像
ranky
修改2022-01-24 15:55:06
3.5K4
修改2022-01-24 15:55:06
举报
文章被收录于专栏:Coding改变生活

1. h5 dragDrop简单介绍

dragdrop 是H5标准的新特性之一,针对每个HTML元素,可以设置一个draggable属性,true表示这个元素能够拖拽,false反之。对于能拖拽的元素,其能够响应‘dragstart’,‘dragover’,‘dragenter’,‘dragleave’,‘dragend’事件,通过addEventListener可以获取相应的拖拽操作。每个事件提供event参数,在dragdrop场景下,多了dataTransfer属性,dataTransfer包含了拖拽相关的数据信息,例如:

代码语言:javascript
复制
  dragEffect: ['copy','move','link','none'], 表示dropEffect将被初始化成期望的动作
  effectAllowed:['copy','copymove',....] , 用来指定拖动时被允许的效果
  files,拖拽包含的文件列表,如果不涉及文件,那么这个列表为空
  setDragImage(imgElement,x,y), 设置拖拽时的图片
  setData(type,data),  设置拖拽时的数据信息,type是MIME字符串,例如text/plain
  getData(type), 返回对应类型的数据信息

2. 拖拽下载的实现

拖拽下载的难点在于:从web页面拖拽出去后,无法感知拖拽的目标地址,因此无法实现下载。因此拖拽下载的问题可以简化为如何感知drop的目标路径。

Electron中使用的内核是Chrome,而chrome在DragDrop setData(dataTransfer 属性之一) 新增了 DownloadURL类型,其作用是将一个已知类型的元素(如图片,octet-stream等拖拽到desktop指定位置)

代码语言:javascript
复制
Chrome: dataTransfer.setData('DownloadURL',[mime]:[filename]:[uri])

我们则可以利用这个特性,拖拽行为产生时,我们通过setData在本地创建一个文件,然后通过electron 调用native模块来监控本地文件的创建,只要能监控到本地文件的创建,那么我们就可以实现下载。

更多内容请访问个人博客, 谢谢: https://pinkcle.com/electron/dragdrop.html

转载需注明出处,请联系作者,谢谢。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. h5 dragDrop简单介绍
  • 2. 拖拽下载的实现
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档