Electron学习第七章读取文件内容

梅子酱~

已于 2022-01-27 15:39:24 修改

阅读量2.5k

点赞数

文章标签： electron javascript 前端

于 2022-01-27 11:34:23 首次发布

本文链接：https://blog.csdn.net/mm_0123456789/article/details/122714495

版权

electron 读取文件内容

点击获取文件内容，并显示在页面中

文章目录

electron 读取文件内容
一、代码实现
二、实现效果

一、代码实现

1.main.js

主进程 main.js
代码如下（示例）：

let electron = require("electron")

const app = electron.app
const BrowserWindow = electron.BrowserWindow

let mainWindow = null

app.on("ready",()=>{
    mainWindow = new BrowserWindow({
        width:800,
        height:800,
        webPreferences:{
            nodeIntegration:true,
            contextIsolation:false,
        }
    });
    // 打开调试工具
    mainWindow.webContents.openDevTools();
    mainWindow.loadFile("index.html");
    mainWindow.on("closed",()=>{
        mainWindow = null
    })
});

// 当所有窗口被关闭了，退出。
app.on('window-all-closed', function() {
    if (process.platform != 'darwin') {
      app.quit();
    }
});

2. html 页面

代码如下（示例）：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Electron</title>
</head>
<body>
    <button id = "btn">点击获取文件内容</button>
    <div id="name"></div>
    
    <script src="./render/render.js"></script>
</body>
</html>

3. render.js

代码如下（示例）：

const fs = require("fs")

window.onload = function(){
    let btn = document.querySelector("#btn")
    let name = document.querySelector("#name")

    btn.onclick = function(){
        fs.readFile("a.txt",(err,data)=>{
            if(err){
                console.log(err)
                return
            }
            name.innerHTML = data;
        })
    }
}