Electron应用双击自定义扩展名文件时Windows下获取文件路径问题

问题核心 #

Windows和Mac的Electron文件打开机制不一样：

• Mac靠open-file事件传递路径
• Windows分两种情况：首次启动时文件路径在process.argv里；如果应用已经在运行，双击文件会启动新实例，得通过second-instance事件接收路径，而且新实例会默认退出，路径要传给已有实例。另外如果electron-builder的文件关联配置不对，系统根本不会把路径传给应用。

步骤1：配置electron-builder文件关联 #

在项目package.json里加build字段，确保自定义扩展名被系统正确关联：

{
  "build": {
    "win": {
      "fileAssociations": [
        {
          "ext": "your-custom-ext", // 换成你的扩展名，比如"xyz"
          "name": "自定义文件类型",
          "description": "你的应用专属文件格式",
          "icon": "src/assets/file-icon.ico" // 可选，给文件加图标
        }
      ]
    },
    "mac": {
      "fileAssociations": [
        {
          "ext": "your-custom-ext",
          "name": "自定义文件类型",
          "role": "Editor"
        }
      ]
    }
  }
}

步骤2：修改main.js，统一跨平台逻辑 #

把Windows的两种场景都处理了，同时兼容Mac的逻辑：

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

let mainWindow;
let openedFilePath = null;

// 处理Windows首次启动的参数
if (process.platform === 'win32') {
  // 从参数里筛选出自定义扩展名的文件路径
  const args = process.argv.slice(1);
  openedFilePath = args.find(arg => arg.endsWith('.your-custom-ext'));
}

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true, // 必须开启，保证安全
      nodeIntegration: false
    }
  });

  mainWindow.loadFile('index.html');

  // 窗口加载完成后，把路径传给渲染进程
  mainWindow.webContents.on('did-finish-load', () => {
    if (openedFilePath) {
      mainWindow.webContents.send('file-opened', openedFilePath);
    }
  });
}

app.whenReady().then(createWindow);

// Mac下的文件打开事件
app.on('open-file', (event, path) => {
  event.preventDefault();
  openedFilePath = path;
  if (mainWindow) {
    mainWindow.focus();
    mainWindow.webContents.send('file-opened', path);
  }
});

// Windows下应用已运行时，双击文件触发的事件
app.on('second-instance', (event, argv) => {
  // 把已有窗口调到前台
  if (mainWindow) {
    if (mainWindow.isMinimized()) mainWindow.restore();
    mainWindow.focus();
  }
  // 提取文件路径
  const filePath = argv.slice(1).find(arg => arg.endsWith('.your-custom-ext'));
  if (filePath) {
    openedFilePath = filePath;
    if (mainWindow) {
      mainWindow.webContents.send('file-opened', filePath);
    }
  }
});

// 兼容你之前的getSource方法
ipcMain.handle('getSource', () => {
  return openedFilePath;
});

步骤3：修改preload.js，统一接收路径 #

不管是Mac还是Windows，都用IPC接收路径：

window.addEventListener('DOMContentLoaded', async () => {
  const { ipcRenderer } = require('electron');
  let path;

  // 获取初始打开的文件路径
  path = await ipcRenderer.invoke('getSource');
  if (path) {
    gui_console.value = path;
  }

  // 监听后续的文件打开事件（比如应用已运行时双击文件）
  ipcRenderer.on('file-opened', (event, filePath) => {
    path = filePath;
    gui_console.value = path;
    // 这里可以加你的文件处理逻辑，比如重新加载文件内容
  });
});

注意事项 #

• 打包后要卸载旧版本再装新版本，不然Windows注册表关联可能不更新
• 别用remote模块，Electron 14之后已经废弃了
• 测试时可以直接用electron . 你的测试文件路径模拟双击场景，验证路径是否能拿到

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