磁盘文件IO

Electron框架对于文件读写其实没有什么特别的封装，对于读文件，HTML5的FileAPI即可满足，因此渲染进程就可以实现文件读取，但要注意遵循浏览器的一些安全限制，比如调起文件读取必须由用户主动触发（当然，也可以使用主进程来读文件，这样就可以绕过FileAPI的限制）；而写文件则复杂一些，我们需要使用主进程访问NodeJS的API来写文件，因此这通常涉及到前面介绍过的进程间通信。

这篇笔记我们通过几个例子程序来展示Electron程序如何实现读写文件。

读取文件

下面例子中，我们实现了用户选择文件并将其显示到页面中。

app.js

document.getElementById('file').addEventListener('change', (event) => {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.onload = () => {
        const data = reader.result;
        document.getElementById('text').innerText = data;
    };
    reader.readAsText(file);
});

上面代码完全在渲染进程中执行，实际上这段代码和Electron没有什么关系，代码中使用的都是HTML5的FileAPI，在浏览器页面中也是完全可以正常运行的。

如果有一些特殊需求，要使用NodeJS的API来读取文件，这就涉及到进程间通信了，具体可以参考Electron进程间通信相关章节，这里就不多介绍了。

写入文件

写文件需要主进程来实现，下面例子中我们编写了一个程序，将用户输入的文本调用主进程写入文件。

preload.js

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

contextBridge.exposeInMainWorld('electronAPI', {
    writeFile: (textData) => ipcRenderer.invoke('write-file', textData)
});

预加载脚本中，我们暴露了一个writeFile()函数，它接收一个参数textData代表用户要写入的文本数据，我们通过ipcRenderer.invoke()调用主进程并将这些数据传递过去。

main.js

const { app, BrowserWindow, ipcMain } = require('electron');
const fs = require('fs/promises');
const path = require('path');

const createWindow = () => {
    // 创建窗口
    const window = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js')
        }
    });

    // 写入文件到磁盘
    ipcMain.handle('write-file', async (_event, textData) => {
        await fs.writeFile(path.join('E:/1.txt'), textData, 'utf-8');
    });


    // 加载HTML文件
    window.loadFile('index.html');
};

app.whenReady().then(() => {
    createWindow();

    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) {
            createWindow();
        }
    })
});

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

主进程中，我们主要关注ipcMain.handle()函数，它监听对write-file的调用，并通过fs.writeFile()将输入写入磁盘的E:/1.txt文件中。

app.js

document.getElementById('btn').addEventListener('click', async () => {
    const textData = document.getElementById('text').value;
    await window.electronAPI.writeFile(textData);
});

渲染进程中，我们读取了文本框的文本数据，并调用预加载脚本暴露的writeFile()函数，由此我们便可以将数据写入到磁盘了。