Electron如何从本地路径读取文件并创建Blob对象？

核心思路是让主进程负责文件读取（主进程天然具备Node.js API权限，无需在渲染进程开启Node集成），将文件内容而非路径传递到渲染进程，再由渲染进程转换为Blob对象供easy-template-x使用。

步骤1：修改主进程background.js代码 #

更新主进程逻辑，在选择文件后直接读取内容，再通过IPC发送文件缓冲和MIME类型：

const { ipcMain, dialog } = require('electron');
const fs = require('node:fs/promises'); // 使用Promise版fs，避免回调嵌套

ipcMain.on('init', async (event) => {
  try {
    const dialogResult = await dialog.showOpenDialog({
      title: 'Select template',
      buttonLabel: 'Upload file',
      filters: [{ name: 'MS Word document', extensions: ['docx'] }],
      properties: ['openFile'] // 限制仅选择单个文件
    });

    if (dialogResult.canceled || dialogResult.filePaths.length === 0) return;

    // 读取文件内容为Buffer
    const fileBuffer = await fs.readFile(dialogResult.filePaths[0]);
    
    // 发送文件数据到渲染进程
    event.sender.send('documentData', {
      buffer: fileBuffer,
      mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
    });
  } catch (error) {
    console.warn('文件处理失败:', error);
    event.sender.send('documentError', error.message);
  }
});

步骤2：更新渲染进程Vue代码 #

渲染进程通过IPC接收文件内容，将Node Buffer转换为浏览器可识别的ArrayBuffer，再生成Blob对象：

先配置Preload脚本（安全必备） #

关闭Node集成后，渲染进程无法直接访问ipcRenderer，需要通过Preload脚本暴露安全的API桥接：

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

contextBridge.exposeInMainWorld('electronAPI', {
  requestTemplate: () => ipcRenderer.send('init'),
  onDocumentData: (callback) => ipcRenderer.on('documentData', callback),
  onDocumentError: (callback) => ipcRenderer.on('documentError', callback)
});

Vue组件中使用桥接API #

// Vue组件的mounted钩子
mounted() {
  // 触发文件选择
  window.electronAPI.requestTemplate();

  // 监听文件数据返回
  window.electronAPI.onDocumentData((_, { buffer, mimeType }) => {
    // 将Node Buffer转换为浏览器原生ArrayBuffer
    const arrayBuffer = buffer.buffer.slice(buffer.byteOffset, buffer.byteOffset + buffer.byteLength);
    
    // 生成Blob并转换为ArrayBuffer供easy-template-x使用
    const blob = new Blob([arrayBuffer], { type: mimeType });
    blob.arrayBuffer().then(templateBuffer => {
      this.store.docTemplate = templateBuffer;
      console.log('模板已加载完成');
    });
  });

  // 监听错误信息
  window.electronAPI.onDocumentError((_, errorMsg) => {
    console.error('加载模板失败:', errorMsg);
    // 可在此添加用户提示逻辑
  });
}

关键说明 #

1. 避免渲染进程直接访问文件系统：关闭Node集成后，渲染进程无权限调用fs模块，所有文件操作交由主进程处理，符合Electron安全最佳实践。
2. Buffer转换逻辑：Electron IPC传递的Node Buffer在渲染进程中需转换为浏览器原生ArrayBuffer，才能正确生成Blob。
3. 安全桥接：通过Preload脚本的contextBridge暴露必要API，防止渲染进程直接操作IPC，避免安全风险。

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