最近在开发一个小工具，需要将主进程处理的结果发送给渲染进程让用户可以实时看到进度。

node环境版本

v16.20.0

electron版本

"electron": "^21.4.4",

效果截图

动态效果

在 Electron 中，你可以使用主进程的 ipcMain 模块与渲染进程的 ipcRenderer 模块来实现主进程向渲染进程发送信息。以下是一个如何实现这一功能的示例：

1. 在主进程中设置监听和发送消息

首先，你需要在主进程中设置监听，以便在接收到特定的事件后向渲染进程发送消息。

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

ipcMain.on('request-data', (event, args) => {
    // 你的逻辑代码，例如获取数据
    const dataToSend = 'Hello from main process!';

    // 获取所有窗口或特定窗口
    const windows = BrowserWindow.getAllWindows();
    windows.forEach(win => {
        win.webContents.send('data-response', dataToSend);
    });
});

以上代码监听名为 'request-data' 的事件，并在该事件被触发时向所有打开的窗口发送名为 'data-response' 的消息。

2. 在预加载脚本中暴露方法

你可以在预加载脚本中暴露一个方法，使渲染进程能够触发上述的 'request-data' 事件。

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

contextBridge.exposeInMainWorld('electron', {
    requestData: () => {
        ipcRenderer.send('request-data');
    }
});

ipcRenderer.on('data-response', (event, data) => {
    // 在此处处理从主进程接收的数据
    console.log(data); // 输出：Hello from main process!
});

3. 在渲染进程中调用方法

最后，在渲染进程的 JavaScript 文件中，你可以调用暴露的 requestData 方法来触发主进程的监听，并通过预加载脚本中的 ipcRenderer.on 来接收数据。

function fetchData() {
    window.electron.requestData();
}

通过以上步骤，你可以实现主进程主动向渲染进程发送信息，并在渲染进程中处理这些信息。这一功能在构建复杂的 Electron 应用程序时非常有用，允许不同的进程之间进行协作和通信。

相关项目

使用electron开发一款单页模板下载助手

实例代码下载

项目运行环境v16.20.0