electron 实现简单下载管理器

文件下载是我们开发中比较常见的业务需求,比如:导出 excel。

web 应用文件下载存在一些局限性,通常是让后端将响应的头信息改成 Content-Disposition: attachment; filename=xxx.pdf,触发浏览器的下载行为。

在 electron 中的下载行为,都会触发 session 的 事件。在该事件里面可以获取到 downloadItem 对象,通过 downloadItem 对象实现一个简单的文件下载管理器:

demo.gif

1. 如何触发下载

由于 electron 是基于 chromium 实现的,通过调用 webContents 的 方法,相当于调用了 chromium 底层实现的下载,会忽略响应头信息,触发 事件。

// 触发下载 win.webContents.downloadURL(url) // 监听 will-download session.defaultSession.on('will-download', (event, item, webContents) => {}) 2. 下载流程

flow_chart.png

3. 功能设计

实现一个简单的文件下载管理器包含以下功能:

设置保存路径

暂停/恢复和取消

下载进度

下载速度

下载完成

打开文件和打开文件所在位置

文件图标

下载记录

3.1 设置保存路径

如果没有设置保存路径,electron 会自动弹出系统的保存对话框。不想使用系统的保存对话框,可以使用 方法,当有重名文件时,会直接覆盖下载。

item.setSavePath(path)

为了更好的用户体验,可以让用户自己选择保存位置操作。当点击位置输入框时,渲染进程通过 ipc 与主进程通信,打开系统文件选择对话框。

select_path.gif

主进程实现代码:

/** * 打开文件选择框 * @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()

download_progress.png


在下载的时候,想在 Mac 系统的程序坞和 Windows 系统的任务栏展示下载信息,比如:

下载数:通过 app 的 属性设置,当为 0 时,不会显示。也可以通过 dock 的 方法设置,该方法支持的是字符串,如果不要显示,需要设置为 ''。

下载进度:通过窗口的 方法设置。

由于 Mac 和 Windows 系统差异,下载数仅在 Mac 系统中生效。加上 process.platform === 'darwin' 条件,避免在非 Mac、Linux 系统下出现异常错误。

下载进度(Windows 系统任务栏、Mac 系统程序坞)显示效果:

windows_progress.png

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpfwjz.html