electron-dl 同时下载多个文件，渲染进程如何显示总体进度及每一个文件的进度

帆帆资源网 · 发表于 2024-2-27 10:27:41

electron-dl 同时下载多个文件，渲染进程如何显示总体进度及每一个文件的进度

要在渲染进程中展示下载进度，您可以使用Electron的 ipcRenderer 模块来将进度信息发送给主进程，然后在渲染进程中进行处理和展示。
以下是一个示例代码，演示了如何在渲染进程中展示下载进度：
在主进程中（main.js）：

const { app, BrowserWindow, ipcMain } = require('electron');
const { download } = require('electron-dl');
const path = require('path');
async function createWindow() {
const mainWindow = new BrowserWindow();
mainWindow.loadURL('https://example.com');
mainWindow.webContents.on('did-finish-load', async () => {
const files = [
{ url: 'https://example.com/file1.ext', directory: 'path/to/save/file1' },
{ url: 'https://example.com/file2.ext', directory: 'path/to/save/file2' },
// Add more files with their respective URLs and directories
];
const totalFiles = files.length;
let completedFiles = 0;
for (const file of files) {
const options = {
directory: path.join(app.getPath('downloads'), file.directory),
onProgress: (progress) => {
const fileProgress = Math.round(progress * 100);
completedFiles++;
const totalProgress = Math.round((completedFiles / totalFiles) * 100);
mainWindow.webContents.send('download-progress', { fileProgress, totalProgress });
},
};
try {
const dl = await download(mainWindow, file.url, options);
console.log(`File saved to: ${dl.getSavePath()}`);
} catch (error) {
console.error('File download failed:', error);
}
}
mainWindow.close();
});
}
app.on('ready', createWindow);

复制代码

在渲染进程中（renderer.js）：

const { ipcRenderer } = require('electron');
ipcRenderer.on('download-progress', (event, progress) => {
const { fileProgress, totalProgress } = progress;
// 在这里更新界面展示下载进度
console.log(`File progress: ${fileProgress}%`);
console.log(`Total progress: ${totalProgress}%`);
});

复制代码

在这个示例代码中，主进程通过 mainWindow.webContents.send 方法将下载进度信息发送给渲染进程。渲染进程通过 ipcRenderer.on 方法监听 download-progress 事件，并在回调函数中处理进度信息并更新界面展示。
您可以根据实际需求，在渲染进程中使用接收到的进度信息来更新界面，例如使用HTML和JavaScript来展示进度条或文本信息。

		自动登录	找回密码
密码			立即注册

[Electron+VUE教程] electron-dl 同时下载多个文件，渲染进程如何显示总体进度及每一个文件的进度

相关帖子

客服中心

投诉建议