Electron-dl中如何向渲染进程传递下载进度？

我来帮你搞定这两个问题——首先，函数无法通过IPC传递是你遇到onProgress不生效的核心原因，其次我们需要通过主进程监听下载进度，再把数据发回渲染进程来展示百分比。

问题根源 #

Electron的IPC通信只能传递可序列化的数据（字符串、数字、普通对象等），函数是不能被序列化的。所以你在渲染进程里把onProgress函数放进properties里传给主进程，主进程拿到的其实是无效的序列化后的数据，自然没法识别为函数。

解决方案步骤 #

我们需要把onProgress回调放在主进程中定义，在回调里计算下载进度，再通过IPC把进度数据发送回渲染进程，最后在渲染进程里监听这个事件来更新UI。

1. 修改主进程代码

在主进程中，给electron-dl的download方法添加onProgress回调，计算进度百分比后用event.sender.send发送给渲染进程：

const { ipcMain, BrowserWindow } = require('electron');
const { download } = require('electron-dl');

ipcMain.on("downloadUpdate", (event, info) => {
  // 合并传入的配置，添加主进程的onProgress回调
  const downloadOptions = {
    ...info.properties,
    onProgress: (progress) => {
      // 计算百分比，避免total为0时的除以0错误
      const percent = progress.total > 0 
        ? Math.round((progress.transferred / progress.total) * 100) 
        : 0;
      // 把进度发送给渲染进程
      event.sender.send("downloadProgress", percent);
    }
  };

  download(BrowserWindow.getFocusedWindow(), info.url, downloadOptions)
    .then(dl => event.sender.send("updateDownloadCompleted", dl.getSavePath()))
    .catch(err => event.sender.send("downloadError", err.message)); // 可选：添加错误处理
});

2. 修改渲染进程代码

在渲染进程中，不再传递onProgress函数，而是监听主进程发来的downloadProgress事件获取进度，同时保留其他配置和完成/错误监听：

const { ipcRenderer } = require('electron');

// 发送下载请求
ipcRenderer.send("downloadUpdate", {
  url: "https://testurl.co/test.zip",
  properties: {
    directory: "/temp/updates",
    filename: "test.zip",
    showBadge: false
  }
});

// 监听下载进度，更新UI
ipcRenderer.on("downloadProgress", (event, percent) => {
  console.log(`当前下载进度：${percent}%`);
  // 这里可以把百分比渲染到页面上，比如更新进度条或文本
  // 示例：document.getElementById('progress-text').textContent = `${percent}%`;
});

// 监听下载完成
ipcRenderer.on("updateDownloadCompleted", (event, savePath) => {
  console.log(`下载完成！文件保存路径：${savePath}`);
});

// 可选：监听下载错误
ipcRenderer.on("downloadError", (event, errorMsg) => {
  console.error(`下载失败：${errorMsg}`);
});

额外说明 #

• electron-dl的onProgress回调参数progress包含transferred（已下载字节）和total（总字节），如果服务器没有返回Content-Length响应头，total会是0，所以我们加了判断避免NaN的情况。
• 确保渲染进程和主进程的IPC事件名称保持一致（比如downloadProgress），不然会收不到消息。

内容的提问来源于stack exchange，提问作者Bardia Khosravi