electron 实现简单下载管理器 (2)

// 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() 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 false shell.openPath(path) return true } // 打开文件所在位置 const openFileInFolder = (path: string): boolean => { if (!fs.existsSync(path)) return false shell.showItemInFolder(path) return true } 3.7 文件图标

很方便的是使用 app 模块的 方法来获取系统关联的文件图标，返回的是 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 将下载记录保存在本地。

其他

项目的地址：
https://github.com/tal-tech/electron-playground

如果想看更完整的文档，请参考下面文档
Electron-Playground 官方文档