【Electron Playground 系列】文件下载篇
作者:long.woo
文件下载是我们开发中比较常见的业务需求,比如:导出 excel。
web 应用文件下载存在一些局限性,通常是让后端将响应的头信息改成 Content-Disposition: attachment; filename=xxx.pdf
,触发浏览器的下载行为。
在 electron 中的下载行为,都会触发 session 的 will-download 事件。在该事件里面可以获取到 downloadItem 对象,通过 downloadItem 对象实现一个简单的文件下载管理器:
1. 如何触发下载
由于 electron 是基于 chromium 实现的,通过调用 webContents 的 downloadURL 方法,相当于调用了 chromium 底层实现的下载,会忽略响应头信息,触发 will-download 事件。
// 触发下载
win.webContents.downloadURL(url)// 监听 will-download
session.defaultSession.on('will-download', (event, item, webContents) => {})
2. 下载流程
3. 功能设计
实现一个简单的文件下载管理器功能包含:
- 设置保存路径
- 暂停/恢复和取消
- 下载进度
- 下载速度
- 下载完成
- 打开文件和打开文件所在位置
- 文件图标
- 下载记录
3.1 设置保存路径
如果没有设置保存路径,electron 会自动弹出系统的保存对话框。不想使用系统的保存对话框,可以使用 setSavePath 方法,当有重名文件时,会直接覆盖下载。
item.setSavePath(path)
为了更好的用户体验,可以让用户自己选择保存位置操作。当点击位置输入框时,渲染进程通过 ipc 与主进程通信,打开系统文件选择对话框。 主进程实现代码:
/*** 打开文件选择框* @param oldPath - 上一次打开的路径*/
const openFileDialog = async (oldPath: string = app.getPath('downloads')) => {if (!win) return oldPathconst { canceled, filePaths } = await dialog.showOpenDialog(win, {title: '选择保存位置',properties: ['openDirectory', 'createDirectory'],defaultPath: oldPath,})return !canceled ? filePaths[0] : oldPath
}ipcMain.handle('openFileDialog', (event, oldPath?: string) => openFileDialog(oldPath))
渲染进程代码:
const path = await ipcRenderer.invoke('openFileDialog', 'PATH')
3.2 暂停/恢复和取消
拿到 downloadItem 后,暂停、恢复和取消分别调用 pause
、resume
和 cancel
方法。当我们要删除列表中正在下载的项,需要先调用 cancel 方法取消下载。
3.3 下载进度
在 DownloadItem 中监听 updated 事件,可以实时获取到已下载的字节数据,来计算下载进度和每秒下载的速度。
// 计算下载进度
const progress = item.getReceivedBytes() / item.getTotalBytes()
在下载的时候,想在 Mac 系统的程序坞和 Windows 系统的任务栏展示下载信息,比如:
- 下载数:通过 app 的 badgeCount 属性设置,当为 0 时,不会显示。也可以通过 dock 的 setBadge 方法设置,该方法支持的是字符串,如果不要显示,需要设置为 ''。
- 下载进度:通过窗口的 setProgressBar 方法设置。
由于 Mac 和 Windows 系统差异,下载数仅在 Mac 系统中生效。加上 process.platform === 'darwin' 条件,避免在非 Mac、Linux 系统下出现异常错误。
下载进度(Windows 系统任务栏、Mac 系统程序坞)显示效果:
// mac 程序坞显示下载数:
// 方式一
app.badgeCount = 1
// 方式二
app.dock.setBadge('1')// mac 程序坞、windows 任务栏显示进度
win.setProgressBar(progress)
3.4 下载速度
由于 downloadItem 没有直接为我们提供方法或属性获取下载速度,需要自己实现。
思路:在 updated 事件里通过 getReceivedBytes 方法拿到本次下载的字节数据减去上一次下载的字节数据。
// 记录上一次下载的字节数据
let prevReceivedBytes = 0item.on('updated', (e, state) => {const receivedBytes = item.getReceivedBytes()// 计算每秒下载的速度downloadItem.speed = receivedBytes - prevReceivedBytesprevReceivedBytes = receivedBytes
})
需要注意的是,updated 事件执行的时间约 500ms 一次。
3.5 下载完成
当一个文件下载完成、中断或者被取消,需要通知渲染进程修改状态,通过监听 downloadItem 的 done 事件。
item.on('done', (e, state) => {downloadItem.state = statedownloadItem.receivedBytes = item.getReceivedBytes()downloadItem.lastModifiedTime = item.getLastModifiedTime()// 通知渲染进程,更新下载状态webContents.send('downloadItemDone', downloadItem)
})
3.6 打开文件和打开文件所在位置
使用 electron 的 shell 模块来实现打开文件(openPath)和打开文件所在位置(showItemInFolder)。
由于 openPath 方法支持返回值
Promise<string>
,当不支持打开的文件,系统会有相应的提示,而 showItemInFolder 方法返回值是void
。如果需要更好的用户体验,可使用 nodejs 的 fs 模块,先检查文件是否存在。
import fs from 'fs'// 打开文件
const openFile = (path: string): boolean => {if (!fs.existsSync(path)) return falseshell.openPath(path)return true
}// 打开文件所在位置
const openFileInFolder = (path: string): boolean => {if (!fs.existsSync(path)) return falseshell.showItemInFolder(path)return true
}
3.7 文件图标
很方便的是使用 app 模块的 getFileIcon 方法来获取系统关联的文件图标,返回的是 Promise<NativeImage>
类型,我们可以用 toDataURL 方法转换成 base64,不需要我们去处理不同文件类型显示不同的图标。
const getFileIcon = async (path: string) => {const iconDefault = './icon_default.png'if (!path) Promise.resolve(iconDefault)const icon = await app.getFileIcon(path, {size: 'normal'})return icon.toDataURL()
}
3.8 下载记录
随着下载的历史数据越来越多,使用 electron-store 将下载记录保存在本地。
对 Electron 感兴趣?请关注我们的开源项目 Electron Playground,带你极速上手 Electron。
我们每周五会精选一些有意思的文章和消息和大家分享,来掘金关注我们的 晓前端周刊。
我们是好未来 · 晓黑板前端技术团队。 我们会经常与大家分享最新最酷的行业技术知识。 欢迎来 知乎、掘金、Segmentfault、CSDN、简书、开源中国、博客园 关注我们。
【Electron Playground 系列】文件下载篇相关推荐
- 【Electron Playground 系列】自定义协议篇
作者: OBKoro1 1. 协议: 从网页端唤起Electron应用 elelctron提供了一个方式来自动唤起electron应用(如下图),这一次就让我们来学学如何通过连接来唤起electron ...
- 【Electron Playground 系列】窗口篇
作者:Kurosaki 本文主要讲解Electron 窗口的 API 和一些在开发之中遇到的问题. 官方文档 虽然比较全面,但是要想开发一个商用级别的桌面应用必须对整个 Electron API 有 ...
- Vue+Electron学习系列 (三) -- 自动更新
Vue+Electron学习系列 1️⃣Vue+Electron学习系列 (一) -- 初识 2️⃣ Vue+Electron学习系列 (二) -- 打包发布 3️⃣ Vu ...
- 深入理解javascript函数系列第二篇——函数参数
前面的话 javascript函数的参数与大多数其他语言的函数的参数有所不同.函数不介意传递进来多少个参数,也不在乎传进来的参数是什么数据类型,甚至可以不传参数.本文是深入理解javascript函数 ...
- Webpack系列-第一篇基础杂记
系列文章 Webpack系列-第一篇基础杂记 Webpack系列-第二篇插件机制杂记 Webpack系列-第三篇流程杂记 前言 公司的前端项目基本都是用Webpack来做工程化的,而Webpack虽然 ...
- SQL Server调优系列进阶篇(如何维护数据库索引)
前言 上一篇我们研究了如何利用索引在数据库里面调优,简要的介绍了索引的原理,更重要的分析了如何选择索引以及索引的利弊项,有兴趣的可以点击查看. 本篇延续上一篇的内容,继续分析索引这块,侧重索引项的日常 ...
- pytorch 指定卡1_[原创][深度][PyTorch] DDP系列第一篇:入门教程
引言 DistributedDataParallel(DDP)是一个支持多机多卡.分布式训练的深度学习工程方法.PyTorch现已原生支持DDP,可以直接通过torch.distributed使用,超 ...
- 用番茄工作法提升工作效率 (三)工作任务的管理(系列完结篇)
一.本文主题 程咬金有三板斧,本文章是本系列文章的最后一篇. 将介绍工作任务的管理,主要涉及周报,月报,年报的等工作计划的管理.有人可能会有疑问:什么?这有什么可介绍的,按照公司要求就可以了. 不同的 ...
- 微信小程序购物商城系统开发系列-工具篇
微信小程序购物商城系统开发系列-工具篇 微信小程序开放公测以来,一夜之间在各种技术社区中就火起来啦.对于它 估计大家都不陌生了,对于它未来的价值就不再赘述,简单一句话:可以把小程序简单理解为一个新的操 ...
最新文章
- Windows XP中安装虚拟网卡microsoft loopback adapter
- C#:ref和out的联系及区别。
- [转载] 湖北:星空团队——海燕计划
- python 查询包_查找Python包的依赖包(语句)
- java缓存_使用Redis和Java进行数据库缓存
- lock 线程 java_Java多线程之Lock的应用
- ant-design 本地web版本下载_bilibili 哔哩哔哩视频如何下载到电脑的 3 种方法
- 【报告分享】5G赋能中国智慧城市白皮书.pdf(附下载链接)
- Hibernate--fetch=FetchType.LAZY
- 经验总结:图书管理系统java课程设计
- 精品软件 推荐 卡巴斯基安全软件 本人使用过的效果最好的杀毒软件之一哟...
- java 读取pdf、word、Excel文件
- 最好用的JQuery插件集合以及组合拳
- iOS 蓝牙扫描设备注意 2021-10-12
- 流程图中的实线_流程图符号_流程图中的带箭头的线段代表什么?
- 网页设计大作业-五子棋游戏,可以进行双人对弈
- win7系统中安装破解版Charles教程 基本使用方法汇总
- windows下用Mingw64编译qtw3d
- 安卓手机突然很卡_安卓手机为什么很卡 安卓手机卡顿原因分析【详解】
- 在Ubuntu虚拟机使用ffmpeg采集摄像头的yuv视频数据
热门文章
- linux下如何播放mp3文件,【linux下播放mp3】
- 计算机存储盘教程,计算机存储u盘启动盘创建工具的详细教程
- gitlab国内镜像和一些注意事项
- java获取项目在磁盘路径
- apt-get阿里源中科大源163源清华源
- iphone无法开机
- lodop打印控件 功能实战
- mysql 连续日期统计_MYSQL -- 计算连续日期天数
- win10+cuda9.1+python3.6
- 基于javaweb的汉服文化bbs商城系统(java+springboot+thymeleaf+html+layui+bootstrap+mysql)