使用Electron读取本地文件

最新推荐文章于 2025-06-06 19:46:13 发布

ch_s_t

最新推荐文章于 2025-06-06 19:46:13 发布

阅读量4k

点赞数 26

CC 4.0 BY-SA版权

分类专栏：前端开发文章标签： electron javascript 前端

本文链接：https://blog.youkuaiyun.com/ch_s_t/article/details/139648834

Electron原来叫Atom Shell ,可以用Web技术搭建桌面端程序，以Electron为基础，可以用HTML，CSS和javascriptpt实现程序逻辑和用户桌面，Electron程序一般有主进程和渲染进程，主进程是启动程序的Node脚本，提供对原生的node模块访问。渲染进程是由chromium管理的Web界面。以下的内容介绍从零开始搭建一个读取本地文件的Electron项目。

一运行简单项目

1.获取electron-quick-start基础项目

electron-quick-start项目是gitHub上提供的简单electron项目模板，包含运行基本Electron程序所必需的依赖项，获取这个项目，安装依赖项命令如下：

git clone https://github.com/atom/electron-quick-start
cd electron-quick-start
npm install

2. 运行与调试

运行命令代码如下：

npm run start

在win10上运行electron-quick-start项目效果如下所示：

注意：调试命令如下 ctrl+shift+i

在此项目中，主进程是main.js,渲染进程是index.html，preload.js是主进程中的预装载代码，renderer.js是渲染进程中渲染代码。

二读取本地文件

1.渲染进程index.html代码

首行在渲染进程index.html中增加一个<pre>标签用于展示读取的本地文件内容，代码如下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inl