当前位置：首页 > news >正文

Electron读取本地文件

news 来源：原创 2025/4/30 7:19:40

在 Electron 应用中，可以使用 Node.js 的 fs 模块来读取本地文件。以下是如何实现这一功能的详细步骤。

1. 设置项目结构

假设你的项目目录如下：

my-electron-app/
├── main.js
├── index.html
└── renderer.js

2. 使用 fs 模块读取文件

在主进程中读取文件

如果你需要在主进程中读取文件，可以直接使用 Node.js 的 fs 模块。例如：

const { app, BrowserWindow } = require('electron');
const fs = require('fs');let mainWindow;function createWindow() {mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {nodeIntegration: true,contextIsolation: false // 允许渲染进程中使用 Node.js 模块}});mainWindow.loadFile('index.html');mainWindow.on('closed', () => {mainWindow = null;});
}app.on('ready', createWindow);app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit();}
});app.on('activate', () => {if (mainWindow === null) {createWindow();}
});// 读取文件的示例
fs.readFile(__dirname + '/data.txt', 'utf8', (err, data) => {if (err) throw err;console.log(data);
});

在渲染进程中读取文件

如果你想在渲染进程中读取本地文件，需要使用 IPC（进程间通信）来传递数据。因为 Electron 默认禁止了直接在渲染进程中使用 Node.js 模块。

渲染进程发送请求

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Electron Read File</title>
</head>
<body><h1>Read Local File in Electron</h1><button id="readFileButton">Read File</button><script src="./renderer.js"></script>
</body>
</html>

// renderer.js
const { ipcRenderer } = require('electron');document.getElementById('readFileButton').addEventListener('click', () => {ipcRenderer.send('request-read-file');
});

主进程接收请求并读取文件

// main.js
const { app, BrowserWindow, ipcMain } = require('electron');
const fs = require('fs');let mainWindow;function createWindow() {mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {nodeIntegration: true,contextIsolation: false // 允许渲染进程中使用 Node.js 模块}});mainWindow.loadFile('index.html');mainWindow.on('closed', () => {mainWindow = null;});
}app.on('ready', createWindow);app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit();}
});app.on('activate', () => {if (mainWindow === null) {createWindow();}
});// 接收渲染进程的请求并读取文件
ipcMain.on('request-read-file', (event, arg) => {fs.readFile(__dirname + '/data.txt', 'utf8', (err, data) => {if (err) throw err;event.sender.send('file-content', data);});
});// 接收文件内容并发送回渲染进程
ipcMain.on('send-file-content-back', (event, content) => {mainWindow.webContents.send('file-content', content);
});

渲染进程接收文件内容

// renderer.js
const { ipcRenderer } = require('electron');document.getElementById('readFileButton').addEventListener('click', () => {ipcRenderer.send('request-read-file');
});ipcRenderer.on('file-content', (event, content) => {console.log(content);
});