Electron多平台应用配置文件关联后如何接收文件？

嗨，别被自定义协议绕晕啦！Electron本身就提供了原生的事件来处理文件关联后的双击打开，分两种核心场景来处理就好：

1. 应用没运行时，双击关联文件启动应用 #

这种情况下，文件路径会作为启动参数传入，你可以在应用准备就绪前就拿到它：

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

// 先存下要打开的文件路径
let pendingFile = null;
// 不同平台的启动参数位置不一样
if (process.platform === 'win32') {
  // Windows下，启动参数从第3个开始是文件路径
  pendingFile = process.argv.slice(2)[0];
} else {
  // macOS/Linux直接取第2个参数
  pendingFile = process.argv[1];
}

app.whenReady().then(() => {
  // 创建窗口的逻辑放在这里
  createMainWindow();
  // 如果有要处理的文件，窗口创建后就去处理它
  if (pendingFile) {
    handleTargetFile(pendingFile);
  }
});

// 写个通用的文件处理函数，后面都能用
function handleTargetFile(filePath) {
  console.log('收到要打开的文件:', filePath);
  // 这里替换成你的实际逻辑，比如读取文件内容展示到窗口里
}

2. 应用已经在运行时，双击关联文件 #

这种情况要分平台监听不同的事件：

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

// macOS下监听open-file事件
app.on('open-file', (event, filePath) => {
  event.preventDefault(); // 一定要阻止默认行为，避免重复处理
  handleTargetFile(filePath);
  // 顺便把窗口拉到前台，提升用户体验
  const mainWindow = BrowserWindow.getAllWindows()[0];
  if (mainWindow) {
    if (mainWindow.isMinimized()) mainWindow.restore();
    mainWindow.focus();
  }
});

// Windows下监听second-instance事件（因为Windows会启动新实例，我们要把参数传给已有实例）
app.on('second-instance', (event, argv) => {
  // 同样提取文件路径
  const filePath = process.platform === 'win32' ? argv.slice(2)[0] : argv[1];
  if (filePath) {
    handleTargetFile(filePath);
  }
  // 恢复窗口并聚焦
  const mainWindow = BrowserWindow.getAllWindows()[0];
  if (mainWindow) {
    if (mainWindow.isMinimized()) mainWindow.restore();
    mainWindow.focus();
  }
});

几个关键注意点 #

• 确保你的electron-builder配置里fileAssociations是正确的，比如：

  // package.json里的build字段
  "build": {
    "mac": {
      "fileAssociations": [
        {
          "ext": "yourfile",
          "name": "自定义文件类型",
          "role": "Editor"
        }
      ]
    },
    "win": {
      "fileAssociations": [
        {
          "ext": "yourfile",
          "description": "自定义文件类型",
          "role": "Editor"
        }
      ]
    }
  }
  

• macOS上open-file事件需要应用签名才能正常触发，开发环境下可能需要去系统偏好设置的「安全性与隐私」里允许应用运行
• 如果要把文件路径传给渲染进程处理，可以用IPC通信，比如在主进程里发消息：

  // 主进程里的handleTargetFile函数里加一句
  mainWindow.webContents.send('open-target-file', filePath);
  

  然后在渲染进程（或preload脚本）里监听：

  const { ipcRenderer } = require('electron');
  ipcRenderer.on('open-target-file', (event, filePath) => {
    // 这里处理文件，比如读取内容展示到页面
    console.log('渲染进程收到文件:', filePath);
  });
  

把这些逻辑整合起来，不管是双击文件启动应用，还是应用已经运行时双击文件，都能稳稳接收到文件路径啦！

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