Electron读取本地文件

最新推荐文章于 2025-04-30 15:30:46 发布

2501_91537388

最新推荐文章于 2025-04-30 15:30:46 发布

阅读量629

点赞数 13

分类专栏：前端文章标签： electron javascript 前端

本文链接：https://blog.csdn.net/2501_91537388/article/details/147614093

版权

前端专栏收录该内容

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);
});