Electron教程（五）读取本地文件内容， icpMain icpRenderer 之间的交互

Electron教程（五）读取本地文件内容， ipcMain ipcRenderer 之间的交互

Electron教程（一）什么是 Electron，由来、适用场景 和 Electron 的环境搭建
Electron教程（二）启动过程：主进程，渲染进程是什么
Electron教程（三）如何打包 electron 程序：electron-forge 的使用教程
Electron教程（四）使用 Vue Browser 版，创建小工具应用
Electron教程（五）读取本地文件内容， ipcMain ipcRenderer 之间的交互
Electron教程（六）应用菜单设置例子
Electron教程（七）结语

读取本地文件的原理： electron 的主进程里可以运行所有node 的功能，包含通过 os 读取系统信息，通过 fs 读取文件和目录。

那么如何实现文件的读取和展示呢？ 因为渲染进程是无法直接跟系统直接交互的，所以分两个部分：

• 主进程负责读取文件
• 主进程把读到的文件内容 -> 传递给渲染进程，再由渲染进程负责展示

知道如何使用这个，几乎所有其它的 node 相关的功能也都知道该如何使用了

node 具体可以做些什么，可以看它的 API 文档

node API: https://nodejs.org/dist/latest-v12.x/docs/api/

一、主进程读取文件内容

使用 fs.readFile() 读取文件内容，该方法传入三个参数

1. 文件路径
2. 参数：编码什么的
3. callback 执行文件读取后执行的方法
   callBack 方法能取得两个参数：
   • 第一个参数是是否有错误
   • 第二个参数是文件内容

官方说明： fs.readFile() API

main.js

const fs = require('fs')

// 文件路径：Windows 也可以使用 `/` 不需要使用 `\\` fs一样能处理，
let filePath = '/Users/Kyle/Library/Rime/test.dict.yaml'

fs.readFile(filePath, {encoding: 'utf-8'}, (err, res) => {
    if(err){
        console.log(err)
    } else {
        // 获取到文件内容后，广播 'showFileContent' 事件
        // 并传递两个参数 filePath 和 文件内容 res
        // 这里的参数可以传递任意多个，根据自己需要来就行了
        // 具体关于 ipcMan ipcRenderer 的使用可以看前面的教程内容
        mainWindow.webContents.send('showFileContent', filePath ,res)
    }
})

二、渲染进程接收主进程的事件信息

然后渲染进程使用 ipcRenderer 监听 showFileContent 这个事件，获取到主进程传递的 filePath 和 文件内容 res，渲染进程就可以根据需要展示文件内容了。

监听的时候，第一个参数是事件相关的 event，后面就是事件里传递的参数了，可以多个。

ipcRenderer.on('showFileContent', (event, filePath, res) => {
    // filePath 获取到的就是上面主进程的 filePath
    // res 就是主进程获取到的文件内容
    // 根据自己需要做相关处理就可以了
})

三、例子

比如我正在做的一个应用的需求是用户点击菜单中的对应文件，页面内载入文件并对文件内容做相关处理，得到词条数据。
关于菜单的设置，下一个教程会介绍。

项目地址：https://github.com/KyleBing/wubi-dict-editor

效果是这样的