如何在Electron渲染进程中不使用remote调用dialog.showSaveDialog

核心逻辑：dialog是Electron主进程模块，目前官方推荐通过进程间通信(IPC) 实现渲染进程触发对话框调用，全程无需依赖@electron/remote，符合安全规范。

步骤1：编写预加载脚本(preload.js) #

利用contextBridge向渲染进程暴露封装好的IPC调用方法，保留默认的上下文隔离安全配置：

const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
  // 暴露打开保存对话框的方法
  showSaveDialog: (dialogOptions) => ipcRenderer.invoke('open-save-dialog', dialogOptions)
})

步骤2：主进程注册IPC监听逻辑 #

主进程侧监听渲染进程发来的IPC请求，调用dialog.showSaveDialog后返回结果：

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

let mainWindow
function createWindow () {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // 关联上面写的预加载脚本
      preload: path.join(__dirname, 'preload.js'),
      // 保持默认安全配置，无需修改
      contextIsolation: true,
      nodeIntegration: false
    }
  })
  mainWindow.loadFile('index.html')
}

// 注册保存对话框IPC处理逻辑
ipcMain.handle('open-save-dialog', async (_, dialogOptions) => {
  const saveResult = await dialog.showSaveDialog(mainWindow, dialogOptions)
  return saveResult
})

app.whenReady().then(createWindow)
// 其余应用生命周期逻辑按原有需求实现即可

步骤3：渲染进程调用 #

在渲染进程业务代码中直接调用预加载暴露的方法即可：

// 示例：点击保存按钮时触发
async function saveFileHandler() {
  // 自定义对话框配置，和官方showSaveDialog参数完全一致
  const options = {
    title: '选择保存位置',
    defaultPath: 'my-file.txt',
    filters: [
      { name: '文本文件', extensions: ['txt'] },
      { name: '所有文件', extensions: ['*'] }
    ]
  }
  const result = await window.electronAPI.showSaveDialog(options)
  if (!result.canceled && result.filePath) {
    // 拿到用户选择的保存路径后执行后续逻辑
    console.log('保存路径：', result.filePath)
  }
}

该方案完全符合Electron官方安全规范，所有主进程API的调用都在主进程侧可控，没有额外第三方依赖，兼容性覆盖所有Electron 10+版本。

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