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

帆帆资源网

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

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

1. const { app, BrowserWindow, ipcMain } = require('electron');
   
2. const { download } = require('electron-dl');
   
3. const path = require('path');
   
4. async function createWindow() {
   
5.   const mainWindow = new BrowserWindow();
   
6.   mainWindow.loadURL('https://example.com');
   
7.    mainWindow.webContents.on('did-finish-load', async () => {
   
8.     const files = [
   
9.       { url: 'https://example.com/file1.ext', directory: 'path/to/save/file1' },
   
10.       { url: 'https://example.com/file2.ext', directory: 'path/to/save/file2' },
    
11.       // Add more files with their respective URLs and directories
    
12.     ];
    
13.      const totalFiles = files.length;
    
14.     let completedFiles = 0;
    
15.      for (const file of files) {
    
16.       const options = {
    
17.         directory: path.join(app.getPath('downloads'), file.directory),
    
18.         onProgress: (progress) => {
    
19.           const fileProgress = Math.round(progress * 100);
    
20.           completedFiles++;
    
21.           const totalProgress = Math.round((completedFiles / totalFiles) * 100);
    
22.           mainWindow.webContents.send('download-progress', { fileProgress, totalProgress });
    
23.         },
    
24.       };
    
25.        try {
    
26.         const dl = await download(mainWindow, file.url, options);
    
27.         console.log(`File saved to: ${dl.getSavePath()}`);
    
28.       } catch (error) {
    
29.         console.error('File download failed:', error);
    
30.       }
    
31.     }
    
32.      mainWindow.close();
    
33.   });
    
34. }
    
35. app.on('ready', createWindow);

复制代码

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

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

复制代码

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