Electron文件读取与保存

最新推荐文章于 2025-02-24 16:00:00 发布

YANGGEOL

最新推荐文章于 2025-02-24 16:00:00 发布

阅读量4.3k

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_46253184/article/details/118636480

版权

前端专栏收录该内容

27 篇文章

订阅专栏

本文介绍了如何使用Electron和Node.js进行HTML页面上的文件读取（包括仅限.js文件）和保存，通过`electron.dialog`和`fs`模块实现实际操作，适合初学者了解基本的文件I/O操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文件读取和保存

html

<button onclick="openFile()">打开文件</button>
<textarea name="" id="" cols="30" rows="10"></textarea>
<button onclick="saveFile()">保存文件</button>

index.js

const {remote: {dialog}} = require('electron')

const fs = require('fs')

//打开文件
const textareaEl =  document.querySelector('textarea')
const openFile = function () {
    const res = dialog.showOpenDialogSync({
        title: '读取文件',
        buttonLabel: '读取',
        filters: [
            {
                // 只读取js文件
                name: 'Custom File Type', extensions: ['js']
            }
        ]
    })

    const fileContent = fs.readFileSync(res[0]).toString()
    textareaEl.value = fileContent
}

// 保存文件
const saveFile = function () {
    const res = dialog.showSaveDialogSync({
        title: '保存文件',
        buttonLabel: '保存',
        filters: [
            {
                // 只读取js文件
                name: 'index', extensions: ['js']
            }
        ]
    })
    fs.writeFileSync(res, textareaEl.value)
}