Electron开启context isolation时渲染进程如何正确调用保存/打开对话框

问题原因 #

Electron v14及以上版本已完全移除内置remote模块，对应的enableRemoteModule配置项也同步废弃，因此你在preload脚本中导入内置remote只会得到undefined。

方案1：使用官方维护的独立remote包（无需额外编写IPC逻辑） #

该方案可以满足你不想手动发送IPC消息的需求，操作步骤如下：

1. 安装依赖
   执行命令：npm install @electron/remote
2. 修改主进程配置（main.js）

const { app, BrowserWindow } = require('electron')
// 初始化@electron/remote
require('@electron/remote/main').initialize()

const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      worldSafeExecuteJavaScript: true,
      preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
    },
  });

// 给当前窗口启用remote权限
require('@electron/remote/main').enable(mainWindow.webContents)

3. 修改preload.js配置

import { contextBridge } from 'electron';
// 从独立包导入remote
import remote from '@electron/remote';

contextBridge.exposeInMainWorld('electron', {
  dialog: remote.dialog
  // 其他需要暴露的API
});

注意：不要直接将整个remote对象暴露给渲染进程，仅暴露你实际需要用到的dialog等有限API，避免引入安全漏洞。

4. 渲染进程调用示例

// 打开保存对话框
window.electron.dialog.showSaveDialog({
  title: '选择保存路径',
  defaultPath: '导出文件.xlsx'
}).then(res => {
  if (!res.canceled) {
    console.log('用户选择的保存路径：', res.filePath)
  }
})

方案2：官方推荐的IPC调用方案（安全性更高） #

该方案不需要引入额外依赖，可控性和安全性更强，也是官方首推的实现方式：

1. 主进程监听IPC事件（main.js）

const { ipcMain, dialog, BrowserWindow } = require('electron')

// 监听保存对话框调用请求
ipcMain.handle('dialog:showSaveDialog', async (event, options) => {
  const win = BrowserWindow.fromWebContents(event.sender)
  return dialog.showSaveDialog(win, options)
})

// 监听打开对话框调用请求
ipcMain.handle('dialog:showOpenDialog', async (event, options) => {
  const win = BrowserWindow.fromWebContents(event.sender)
  return dialog.showOpenDialog(win, options)
})

2. preload.js暴露调用入口

import { contextBridge, ipcRenderer } from 'electron';

contextBridge.exposeInMainWorld('electron', {
  showSaveDialog: (options) => ipcRenderer.invoke('dialog:showSaveDialog', options),
  showOpenDialog: (options) => ipcRenderer.invoke('dialog:showOpenDialog', options)
})

3. 渲染进程调用示例

window.electron.showSaveDialog({
  title: '保存文件'
}).then(res => {
  // 处理返回结果
})

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