最近把公司一个 Web APP 项目用 Electron 封装了一个 Mac 客户端,主要是弥补了 Web 浏览器的一些先天不足:

  • 支持原生的通知
  • 支持原生的 icon 未读提醒
  • 支持原生的系统托盘
  • 增强网络状态变更的感知

其中以前下载方式是通过打开系统浏览器进行文件下载的。因为文件需要鉴权,还得携带一些敏感的 cookie、token 过去,感觉不安全,所以希望文件下载能在 APP 内完成

通过 Electron 中 will-download 事件,我们可以很方便的解决这个问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
mainWindow.webContents.session.on('will-download', (e, item) => {
//获取文件的总大小
const totalBytes = item.getTotalBytes();
//设置文件的保存路径,此时默认弹出的 save dialog 将被覆盖
const filePath = path.join(app.getPath('downloads'), item.getFilename());
item.setSavePath(filePath);
//监听下载过程,计算并设置进度条进度
item.on('updated', () => {
mainWindow.setProgressBar(item.getReceivedBytes() / totalBytes);
});
//监听下载结束事件
item.on('done', (e, state) => {
//如果窗口还在的话,去掉进度条
if (!mainWindow.isDestroyed()) {
mainWindow.setProgressBar(-1);
}
//下载被取消或中断了
if (state === 'interrupted') {
electron.dialog.showErrorBox('下载失败', `文件 ${item.getFilename()} 因为某些原因被中断下载`);
}
//下载完成,让 dock 上的下载目录Q弹一下下
if (state === 'completed') {
app.dock.downloadFinished(filePath);
}
});
});