Electron中捕获window.open()触发的文件保存与取消事件

嘿，我懂你现在的困扰——在浏览器里用window.open触发下载能自动完成还关闭标签页，但到了Electron里就弹出原生保存对话框，还没法捕获用户点了保存还是取消。别慌，咱们可以利用Electron的原生API来实现这个需求，核心思路是通过主进程+IPC通信来接管下载流程，这样就能完全控制对话框的事件了。

为什么原来的方法不行？ #

Electron里的window.open行为和浏览器有差异：它会触发原生文件保存对话框，但前端JS没法直接监听这个对话框的确认/取消事件。所以必须换用Electron主进程的dialog和文件操作API来处理。

具体实现步骤 #

1. 主进程配置（main.js） #

主进程负责弹出保存对话框、处理文件下载，并通过IPC和渲染进程通信：

const { app, BrowserWindow, dialog, ipcMain } = require('electron');
const fs = require('fs');
const path = require('path');
const https = require('https'); // 如果你的下载地址是HTTP，换成http模块

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false, // 遵循Electron安全最佳实践，关闭直接节点集成
      contextIsolation: true,
      preload: path.join(__dirname, 'preload.js') // 预加载脚本，用于安全的IPC桥接
    }
  });

  mainWindow.loadFile('你的页面文件路径，比如index.html');
}

// 监听渲染进程发来的下载请求
ipcMain.handle('download-file', async (event, downloadUrl) => {
  // 弹出原生保存对话框
  const { canceled, filePath } = await dialog.showSaveDialog({
    title: '保存聊天文件',
    defaultPath: path.join(app.getPath('downloads'), 'chat-document'), // 默认保存到下载文件夹，预设文件名
    filters: [
      { name: '所有文件', extensions: ['*'] }, // 可以自定义允许的文件格式，比如{name: 'PDF文件', extensions: ['pdf']}
    ]
  });

  if (canceled) {
    // 用户点击了取消，直接返回失败状态
    return { success: false };
  }

  // 下载文件并写入到用户选择的路径
  return new Promise((resolve) => {
    const fileStream = fs.createWriteStream(filePath);
    https.get(downloadUrl, (response) => {
      response.pipe(fileStream);
      fileStream.on('finish', () => {
        fileStream.close();
        // 下载完成，返回成功状态
        resolve({ success: true });
      });
    }).on('error', (err) => {
      // 下载失败，删除已创建的空文件
      fs.unlinkSync(filePath);
      resolve({ success: false, error: err.message });
    });
  });
});

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

2. 预加载脚本（preload.js） #

因为Electron的安全策略，渲染进程不能直接调用主进程API，所以用预加载脚本暴露安全的IPC接口：

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

// 向渲染进程暴露可调用的API
contextBridge.exposeInMainWorld('electronAPI', {
  downloadFile: (url) => ipcRenderer.invoke('download-file', url)
});

3. 渲染进程替换原有代码 #

把你原来的window.open代码替换成调用我们暴露的API，并处理结果：

// 替换原来的var win = window.open(...)
const downloadUrl = appConfig.server_url + '/v1/discussion/files/download/chat' + '/' + params;

// 调用Electron提供的下载API
window.electronAPI.downloadFile(downloadUrl).then((result) => {
  if (result.success) {
    // 用户点击保存且下载成功，弹出提示
    alert('下载成功'); // 你可以换成项目里的自定义提示组件，比如Element UI的message
  }
  // 如果用户取消或者下载失败，啥也不做，符合你的需求
});

额外说明 #

• 如果你需要处理大文件，可以在下载过程中监听response的data事件来实现进度条；
• 可以根据业务需求调整保存对话框的filters参数，限制用户只能保存特定格式的文件；
• 下载失败的情况你也可以选择添加错误提示，不过根据你的需求，取消和失败都可以不做操作。

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