electron 实现文件下载管理器

// 触发下载

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 oldPath

const { 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 = 0

item.on(‘updated’, (e, state) => {

const receivedBytes = item.getReceivedBytes()

// 计算每秒下载的速度

downloadItem.speed = receivedBytes - prevReceivedBytes

prevReceivedBytes = receivedBytes

})

需要注意的是，updated 事件执行的时间约 500ms 一次。

3.5 下载完成

============

当一个文件下载完成、中断或者被取消，需要通知渲染进程修改状态，通过监听 downloadItem的 done 事件。

item.on(‘done’, (e, state) => {

downloadItem.state = state

downloadItem.receivedBytes = item.getReceivedBytes()

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数Java工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Java开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Java开发知识点，不论你是刚入门Java开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
HUz-1715671560351)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Java开发知识点，不论你是刚入门Java开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！