electron实现打开文件并将文件内容显示

科技2024-02-23 108

步骤分析

点击菜单按钮打开文件读取文件路径使用fs模块读取文件内容将文件内容渲染到页面上

点击菜单按钮打开文件

创建模板菜单，将其添加在主进程中

let template =[ { label:'文件', submenu:[ { label:'新建', click:function(){ } }, { label:'打开', click:function(){ //主进程通知渲染进程操作文件 BrowserWindow.getFocusedWindow().webContents.send('action') } }, { label:'保存', click:function(){ } }, { type:'separator' }, { label:'打印', click:function(){ } }, { label:'退出', click:function(){ } } ] } ] let m = Menu.buildFromTemplate(template) Menu.setApplicationMenu(m)

读取文件渲染文件内容

渲染进程接收到主进程发送的信息，并进行读取文件将文件内容渲染到页面上。

//引入ipcRenderer模块，remote模块 var {ipcRenderer,remote} = require('electron') //引入fs模块 var fs = require('fs') //获取文本框的dom var textAreaDom = document.querySelector('#textArea') ipcRenderer.on('action',function(event,action){ // 通过dialog打开文件 remote.dialog.showOpenDialog({ properties:['openFile'] }).then(dir => { //通过fs模块读取文件内容 var fsData = fs.readFileSync(dir.filePaths[0]) //将fs模块中读取的内容渲染到文本输入框 textAreaDom.value= fsData }) } })

HTML文件

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="./static/css/index.css"> </head> <body> <textarea id="textArea"></textarea> <script src="./renderer/ipcRenderer.js"></script> </body> </html>

分享完毕。

Processed: 0.023, SQL: 8