H5W3
当前位置:H5W3 > JavaScript > 正文

electron监控文件下载进度并显示进度条

本文转载自:https://newsn.net/

在上一篇文章中,苏南大叔描述了在electron下载文件的时候,触发下载的几种形式。其中在文末留下了一个伏笔,那就是无法获知文件下载的进度,以及是否以及完成了下载。那么在本文中,苏南大叔就要进一步描述electron程序的文件下载过程中,如何监控文件下载进度。

electron程序,如何监控文件下载进度,并显示进度条?

本文测试环境:mac

基本描述

本文中,在electron的渲染进程里面,苏南大叔放了几个文件下载的链接,是百度开发者工具的下载链接,用于测试。而且,在理解本文的内容之前,苏南大叔提示您,先读一下下面这篇前置文章:

will-download事件

electron的文件下载过程中,所有的控制层面代码,都是在一个will-download事件中进行编写的。所以,这个will-download事件,是解题的前提条件。

mainWindow.webContents.session.on('will-download', (event, item, webContents) => {
//...
})

这里重点需要专注的就是item对象,关键信息都在这个item之中存储。这个item就可以理解为被下载的这个文件。值得注意的是:

是否出现保存对话框

如果有设置item.setSavePath(),就不会出现保存对话框,如果没有设置,就会出现对话框。这个理解上有些奇怪,不过确实就是这么触发的。

mainWindow.webContents.session.on('will-download', (event, item, webContents) => {
const filePath = path.join(app.getPath('downloads'), item.getFilename());
item.setSavePath(filePath);
//...
})

上面的代码,就是把文件默认保存到了downloads这个系统目录下面了。具体的更多细节,可以参见下面的这篇文字:

注册item事件

对每个will-download里面的item,通过事件注册,进而就可以获得更多实时信息。比如:下载的进度百分比。那么item可以注册的事件都有那些呢?

electron程序,如何监控文件下载进度,并显示进度条?

item.on('updated',()=>{})

这个itemupdated事件,是时刻更新触发的,获得进度就是主要在这里获取的。

item.on('updated', (event, state) => {
if (state === 'progressing') {
if (item.isPaused()) {
}
else{
//这里是主战场
}
}
else if (state === 'interrupted') {
}
else {
}
});

从上述代码中,苏南大叔讲述了两个item事件:

electron程序,如何监控文件下载进度,并显示进度条?

计算进度

itemupdated事件中,苏南大叔选择一个合适的地方来获得合适的信息。对于本文的需求来说,主要推荐获取的item信息如下:

已经下载的进度百分比:

(item.getReceivedBytes()/item.getTotalBytes()*100).toFixed(2)+"%"

item.once('done', () => {})

下载完成事件done中的state有三个分支,分别是:

item.once('done', (event, state) => {
if (state === 'completed') {
//这里是主战场
} else if (state=="cancelled") {
//...
}
else{
//...
}
})

显示进度状态

主进程

进度状态的表现形式上,就多种多样了,因为上述代码都是在主进程中的,所以,主进程是近水楼台先得月的。可以在console中任意输出。

electron程序,如何监控文件下载进度,并显示进度条?

异常处理

if (!mainWindow.isDestroyed()) {
//mainWindow正常存在
}

ipc通知渲染进程

主进程通知渲染进程的时候,也是需要这个mainWindow对象的。所以,一定要控制异常。

mainWindow.webContents.send('event-ipc', {
name:item.getFilename(),
receive:item.getReceivedBytes(),
total:item.getTotalBytes(),
});
electron程序,如何监控文件下载进度,并显示进度条?

显示进度条

还可以在任务栏图标上面显示下载进度,这个效果是很高大上的。不过一样需要判断异常mainWindow。显示进度:

mainWindow.setProgressBar(item.getReceivedBytes() / item.getTotalBytes());

隐藏进度:

mainWindow.setProgressBar(-1) //不显示进度
electron程序,如何监控文件下载进度,并显示进度条?

最终代码

主进程:

newsn.net:这里是【评论】可见内容

渲染进程:

const {ipcRenderer} = require('electron')
ipcRenderer.on('down-process', (event,data) => {
console.log(data);
});
ipcRenderer.on('down-cancle', (event,data) => {
console.log("cancle");
});
ipcRenderer.on('down-done', (event,data) => {
console.log("done");
});
ipcRenderer.on('down-fail', (event,data) => {
console.log("fail");
});

总结

本文中,苏南大叔主要讲述的话题是:electron程序,如何监控文件下载进度?至于最终的进度表现形式,大家还是根据自己的实际需求,进行处理比较好。

本文地址:H5W3 » electron监控文件下载进度并显示进度条

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址