electron-dl 实现下载,监听下载开始,结束,进度条,并且是多个下载,
时间: 2023-08-10 18:18:26 浏览: 377
下载文件并监控下载进度
3星 · 编辑精心推荐
要实现监听多个下载的开始、结束和进度条,可以使用 `electron-dl` 模块结合 `electron` 的 `ipcMain` 和 `ipcRenderer` 模块来实现。
下面是一个简单的示例代码:
1. 在主进程中监听下载事件,使用 `electron-dl` 模块来进行下载,同时使用 `webContents.send()` 方法将下载的信息发送给渲染进程:
```javascript
const { ipcMain, BrowserWindow } = require('electron')
const { download } = require('electron-dl')
ipcMain.on('download', (event, url) => {
const win = BrowserWindow.getFocusedWindow()
download(win, url, { directory: '/path/to/downloads' })
.then(dl => {
// 发送下载完成的信息给渲染进程
event.sender.send('download-complete', dl.getSavePath())
})
.catch(err => {
// 发送下载出错的信息给渲染进程
event.sender.send('download-error', err)
})
// 发送下载开始的信息给渲染进程
event.sender.send('download-start', url)
})
```
2. 在渲染进程中使用 `ipcRenderer` 监听下载事件和下载进度,更新进度条的值:
```javascript
const { ipcRenderer } = require('electron')
// 监听下载开始事件
ipcRenderer.on('download-start', (event, url) => {
// 向 DOM 中添加一个下载项
const downloadItem = document.createElement('div')
downloadItem.innerHTML = `<div class="download-url">${url}</div>
<progress class="download-progress" value="0" max="100"></progress>`
document.querySelector('#downloads').appendChild(downloadItem)
})
// 监听下载完成事件
ipcRenderer.on('download-complete', (event, filePath) => {
// 更新 DOM 中对应下载项的状态
const downloadItem = document.querySelector(`.download-url:contains(${filePath})`).parentNode
downloadItem.innerHTML = `<div class="download-url">${filePath}</div>
<div class="download-status">已完成</div>`
})
// 监听下载出错事件
ipcRenderer.on('download-error', (event, err) => {
// 更新 DOM 中对应下载项的状态
const downloadItem = document.querySelector(`.download-url:contains(${err.url})`).parentNode
downloadItem.innerHTML = `<div class="download-url">${err.url}</div>
<div class="download-status">${err.error}</div>`
})
// 监听下载进度事件
ipcRenderer.on('download-progress', (event, { url, progress }) => {
// 更新 DOM 中对应下载项的进度条的值
const downloadItem = document.querySelector(`.download-url:contains(${url})`).parentNode
downloadItem.querySelector('.download-progress').value = progress
})
```
3. 在下载过程中,使用 `dl.on('progress', callback)` 方法来监听下载进度,然后使用 `webContents.send()` 方法将进度信息发送给渲染进程:
```javascript
ipcMain.on('download', (event, url) => {
const win = BrowserWindow.getFocusedWindow()
download(win, url, { directory: '/path/to/downloads' })
.then(dl => {
// 发送下载完成的信息给渲染进程
event.sender.send('download-complete', dl.getSavePath())
})
.catch(err => {
// 发送下载出错的信息给渲染进程
event.sender.send('download-error', err)
})
// 发送下载开始的信息给渲染进程
event.sender.send('download-start', url)
// 监听下载进度事件,发送下载进度信息给渲染进程
dl.on('progress', ({ percent }) => {
event.sender.send('download-progress', { url, progress: percent })
})
})
```
这样,就可以实现多个下载的监听和进度条更新了。
阅读全文