在Electron+React应用中如何监听文件保存按钮事件？

你之前给a标签加click事件没用，因为link.click()是代码主动触发的，这时候只是弹出保存对话框，用户还没点保存，日志就直接打出来了，完全不是你要的时机。

要监听用户点击系统保存对话框的保存按钮，得用Electron主进程的下载事件API——渲染进程没法直接捕获系统对话框的操作，具体步骤如下：

1. 主进程配置（main.js） #

在Electron的主进程文件里，监听窗口的下载事件，捕获下载完成的时机：

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

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // 实际项目建议用contextBridge做安全隔离，这里为示例简化配置
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  mainWindow.loadURL('http://localhost:3000'); // 你的React开发服务地址

  // 监听下载请求
  mainWindow.webContents.session.on('will-download', (event, item) => {
    // 监听下载完成事件
    item.on('done', (event, state) => {
      if (state === 'completed') {
        console.log('file is downloaded');
        // 如果需要在React控制台打印，通过IPC通知渲染进程
        mainWindow.webContents.send('download-finished', 'file is downloaded');
      }
    });
  });
}

app.whenReady().then(createWindow);

2. React组件代码调整 #

去掉a标签的click监听，改成通过IPC接收主进程的下载完成通知，同时优化原有的导出代码：

import { useEffect } from 'react';
const { ipcRenderer } = window.require('electron');

const ExcelExportComponent = () => {
  // 监听主进程的下载完成消息
  useEffect(() => {
    const handleDownloadFinish = (_, message) => {
      console.log(message);
    };
    ipcRenderer.on('download-finished', handleDownloadFinish);

    // 组件卸载时移除监听
    return () => {
      ipcRenderer.removeListener('download-finished', handleDownloadFinish);
    };
  }, []);

  const handleExport = () => {
    const ws = XLSX.utils.json_to_sheet(filteredDataArray);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
    const excelBuffer = XLSX.write(wb, { bookType: "xlsx", type: "array" });
    const blob = new Blob([excelBuffer], {
      type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
    });

    const fileName = `sampleExcel.xlsx`;
    const href = URL.createObjectURL(blob);

    // 创建a标签触发下载（也可以用Electron的downloadURL API）
    const link = document.createElement("a");
    link.href = href;
    link.download = fileName;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(href); // 释放URL对象，避免内存泄漏
  };

  return (
    <button onClick={handleExport}>导出Excel</button>
  );
};

export default ExcelExportComponent;

关键说明 #

• 主进程的will-download事件会捕获所有窗口内的下载请求，通过item.on('done')可以知道下载的最终状态（完成、取消、失败）。
• 如果你不需要在React控制台打印，只在Electron主进程控制台输出，那可以去掉IPC相关的代码，直接在主进程的done事件里打印即可。
• 高版本Electron建议使用contextBridge和ipcRenderer做安全的进程间通信，避免直接开启nodeIntegration。

内容的提问来源于stack exchange，提问作者Piyush Chatterjee