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

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

Electron教程（一）什么是 Electron，由来、适用场景和 Electron 的环境搭建

Electron教程（二）启动过程：主进程，渲染进程是什么

Electron教程（三）如何打包 electron 程序：electron-forge 的使用教程

Electron教程（四）使用 Vue Browser 版，创建小工具应用

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

Electron教程（六）应用菜单设置例子

Electron教程（七）结语

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

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

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

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

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

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

一、主进程读取文件内容

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

文件路径
参数：编码什么的
callback 执行文件读取后执行的方法
callBack 方法能取得两个参数：

第一个参数是是否有错误
第二个参数是文件内容

官方说明： fs.readFile() API

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

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
        // 这里的参数可以传递任意多个，根据自己需要来就行了
        // 具体关于 icpMan icpRenderer 的使用可以看前面的教程内容
        mainWindow.webContents.send('showFileContent', filePath ,res)
    }
})

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

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

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

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