如何在ReactJS后台管理面板中实现打开Windows本地可执行文件的按钮？

可行，但受浏览器安全策略限制，无法仅通过前端代码直接实现，需要结合特定方案绕过限制

具体实现方式 #

方案一：自定义URL协议（最常用的通用方案） #

原理：在Windows系统中注册一个自定义URL协议（比如myapp://），将其与目标可执行程序绑定。前端只需触发这个协议就能唤起本地程序。

实现步骤：

1. 编写Windows注册表脚本（保存为.reg文件），注册自定义协议：

   Windows Registry Editor Version 5.00
   
   [HKEY_CLASSES_ROOT\myapp]
   @="URL:MyApp Protocol"
   "URL Protocol"=""
   
   [HKEY_CLASSES_ROOT\myapp\shell]
   
   [HKEY_CLASSES_ROOT\myapp\shell\open]
   
   [HKEY_CLASSES_ROOT\myapp\shell\open\command]
   @="\"C:\\绝对路径\\到你的\\程序.exe\" \"%1\""
   

2. 让用户双击这个.reg文件，将配置导入Windows注册表，完成协议与程序的关联。
3. React组件中添加触发按钮：

   const openLocalApp = () => {
     // 触发自定义协议
     window.open('myapp://');
   };
   
   // 组件内使用
   <button onClick={openLocalApp}>打开本地程序</button>
   

注意：首次触发时浏览器会弹出安全提示，需要用户手动允许；自定义协议名称不能和系统已有的协议（如http://、ftp://）冲突。

方案二：Electron封装（适合转为桌面应用的场景） #

如果你的React后台面板可以打包成Windows桌面应用，用Electron可以直接绕过浏览器安全限制，调用本地程序。

实现步骤：

1. 在Electron主进程中添加IPC方法，用于调用本地程序：

   // main.js
   const { ipcMain, shell } = require('electron');
   
   ipcMain.handle('open-local-program', async () => {
     try {
       // 传入本地程序的绝对路径
       await shell.openPath('C:\\路径\\到\\你的程序.exe');
       return true;
     } catch (error) {
       console.error('打开失败:', error);
       return false;
     }
   });
   

2. React渲染进程中调用该IPC方法：

   const { ipcRenderer } = window.require('electron');
   
   const openLocalApp = async () => {
     const success = await ipcRenderer.invoke('open-local-program');
     if (!success) {
       alert('打开本地程序失败，请检查路径是否正确');
     }
   };
   
   <button onClick={openLocalApp}>打开本地程序</button>
   

方案三：浏览器扩展（适合企业内部受控环境） #

在企业内部场景下，可以开发Chrome/Edge浏览器扩展，利用扩展的高权限调用本地原生应用（需要配合本地原生消息主机）。

核心逻辑：

1. 编写原生消息主机配置文件，注册到Windows注册表，关联目标程序；
2. 开发浏览器扩展，通过chrome.runtime.sendNativeMessage() API与原生消息主机通信，进而启动本地程序；
3. React页面通过与扩展通信，触发程序启动操作。

关键注意事项 #

• 所有方案都需要客户端（用户电脑）完成相应配置，前端无法单独实现；
• 自定义URL协议是最通用的方案，但依赖用户手动导入注册表；
• Electron方案适合希望将Web应用转为桌面应用的场景，用户体验更流畅；
• 浏览器扩展方案仅适合企业内部等受控环境，普通外网场景不适用。

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