Electron+React+TS桌面应用如何获取点击文件的扩展名？

完全可以通过Electron的open-file事件实现需求，这个事件专门用来处理用户点击文件（或从文件管理器拖放）触发应用打开的场景，结合Node.js的API就能轻松获取文件扩展名。以下是具体实现步骤：

1. 主进程配置与事件监听（TypeScript） #

在Electron主进程中，监听open-file事件，从事件参数中获取文件路径，再用Node.js的path模块提取扩展名。同时要考虑不同平台的兼容性：

import { app } from 'electron';
import path from 'path';

// 应用就绪后初始化
app.on('ready', () => {
  // 这里可以添加窗口初始化逻辑（如果需要显示界面）
});

// 监听文件打开事件
app.on('open-file', (event, filePath) => {
  event.preventDefault(); // 阻止系统默认的文件打开行为
  // 获取扩展名并转为小写（统一格式）
  const fileExt = path.extname(filePath).toLowerCase();
  console.log('当前打开文件的扩展名:', fileExt);

  // 若需将扩展名传递给React渲染进程，可通过IPC发送
  // if (mainWindow) {
  //   mainWindow.webContents.send('file-opened', fileExt);
  // }
});

// macOS平台：应用后台激活时需重新处理文件打开请求
app.on('activate', (event, hasVisibleWindows) => {
  if (!hasVisibleWindows) {
    // 按需初始化窗口
  }
});

// Windows平台：应用启动时的命令行参数可能包含打开的文件路径
if (process.platform === 'win32') {
  const targetFilePath = process.argv[1];
  if (targetFilePath) {
    const fileExt = path.extname(targetFilePath).toLowerCase();
    console.log('启动时打开的文件扩展名:', fileExt);
  }
}

2. React渲染进程接收数据（TypeScript） #

如果需要在React界面中处理扩展名，可以通过Electron的ipcRenderer监听主进程发来的事件：

import { useEffect } from 'react';
import { ipcRenderer } from 'electron';

const App = () => {
  useEffect(() => {
    const handleFileExtension = (fileExt: string) => {
      // 这里添加你的业务逻辑，比如根据扩展名做对应处理
      console.log('渲染进程收到文件扩展名:', fileExt);
    };

    // 监听主进程发送的事件
    ipcRenderer.on('file-opened', (_, fileExt) => handleFileExtension(fileExt));
    
    // 组件卸载时移除监听，避免内存泄漏
    return () => {
      ipcRenderer.removeListener('file-opened', handleFileExtension);
    };
  }, []);

  return <div>你的应用界面</div>;
};

export default App;

3. 关键配置说明 #

• 后台运行设置：macOS需在打包配置的extendInfo中添加"LSUIElement": true，Windows可通过隐藏主窗口+托盘图标实现后台运行。
• 文件类型关联：要让系统识别你的应用能打开哪些文件，需在package.json的打包配置中添加文件关联（以electron-builder为例）：

"build": {
  "mac": {
    "extendInfo": {
      "LSUIElement": true,
      "CFBundleDocumentTypes": [
        {
          "CFBundleTypeName": "所有文件",
          "CFBundleTypeRole": "Viewer",
          "LSItemContentTypes": ["public.item"]
        }
      ]
    },
    "win": {
      "associations": [
        {
          "ext": ["*"],
          "description": "所有文件"
        }
      ]
    }
  }
}

• 测试注意：文件关联需要安装打包后的应用才会生效，开发模式下可手动设置系统文件关联，或直接通过命令行传入文件路径测试。

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