Electron中如何将renderer.js生成的音频Blob保存至磁盘？

要实现将Renderer进程中创建的audio/wav格式Blob保存到本地，核心是通过**Electron的IPC（进程间通信）**将Blob数据传递给Main进程，再由Main进程完成文件系统操作（Renderer进程出于安全限制，不建议直接操作本地文件）。以下是完整实现步骤：

1. 在Renderer进程中处理Blob并发送到Main进程 #

Blob无法直接通过IPC传递，需要先转换为可序列化的格式（推荐ArrayBuffer，比base64更高效），再发送给Main进程。

基础实现（适用于旧版Electron，nodeIntegration开启） #

// renderer.js
const { ipcRenderer } = require('electron');

// 假设你已通过离线渲染器得到audioBlob（audio/wav格式）
function saveAudioBlob(audioBlob) {
  const reader = new FileReader();
  reader.onload = () => {
    // 将Blob转为ArrayBuffer后发送
    ipcRenderer.send('save-wav-file', reader.result, 'recording.wav');
  };
  reader.readAsArrayBuffer(audioBlob);
}

// 监听Main进程的保存结果反馈
ipcRenderer.on('save-status', (_, status, msg) => {
  if (status === 'success') {
    console.log(`文件已保存至: ${msg}`);
    alert(`音频保存成功：${msg}`);
  } else {
    console.error('保存失败:', msg);
    alert(`保存失败：${msg}`);
  }
});

安全实现（适用于新版Electron，contextIsolation开启） #

新版Electron默认开启contextIsolation，需通过预加载脚本（preload.js）暴露IPC接口：

// preload.js
const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAudioAPI', {
  saveWav: (buffer, filename) => ipcRenderer.send('save-wav-file', buffer, filename),
  onSaveStatus: (callback) => ipcRenderer.on('save-status', callback)
});

然后在Renderer进程中调用暴露的接口：

// renderer.js
function saveAudioBlob(audioBlob) {
  const reader = new FileReader();
  reader.onload = () => {
    window.electronAudioAPI.saveWav(reader.result, 'recording.wav');
  };
  reader.readAsArrayBuffer(audioBlob);
}

// 监听保存结果
window.electronAudioAPI.onSaveStatus((_, status, msg) => {
  // 处理结果逻辑同基础实现
});

2. 在Main进程中接收数据并保存到本地 #

Main进程负责打开保存对话框、处理文件写入，使用dialog模块让用户选择保存路径，fs模块完成文件写入。

// main.js
const { app, BrowserWindow, ipcMain, dialog } = require('electron');
const fs = require('fs');
const path = require('path');

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // 新版Electron使用preload脚本，开启contextIsolation
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true
      // 旧版Electron可开启nodeIntegration: true、contextIsolation: false
    }
  });
  mainWindow.loadFile('index.html');
}

app.whenReady().then(createWindow);

// 监听Renderer进程的保存请求
ipcMain.on('save-wav-file', async (event, arrayBuffer, defaultFilename) => {
  // 打开保存对话框，让用户选择路径
  const { filePath } = await dialog.showSaveDialog(mainWindow, {
    defaultPath: path.join(app.getPath('documents'), defaultFilename),
    filters: [{ name: 'WAV音频文件', extensions: ['wav'] }]
  });

  if (!filePath) {
    // 用户取消保存
    event.reply('save-status', 'cancel', '用户取消保存');
    return;
  }

  // 将ArrayBuffer转为Node.js Buffer
  const buffer = Buffer.from(arrayBuffer);

  // 写入文件
  fs.writeFile(filePath, buffer, (err) => {
    if (err) {
      event.reply('save-status', 'error', err.message);
    } else {
      event.reply('save-status', 'success', filePath);
    }
  });
});

关键注意事项 #

• IPC数据限制：Blob无法直接序列化传递，必须转为ArrayBuffer或base64（ArrayBuffer性能更优）。
• 权限问题：Renderer进程不建议直接操作本地文件，所有文件系统操作应由Main进程完成，符合Electron的安全模型。
• 版本兼容：新版Electron默认开启contextIsolation，必须使用预加载脚本暴露IPC接口，避免直接在Renderer中引入Electron模块。

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