用Electron开发一个文件浏览器（二）

最新推荐文章于 2025-07-03 03:31:53 发布

Meskjei

最新推荐文章于 2025-07-03 03:31:53 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： Electron 文章标签： Electron

本文链接：https://blog.youkuaiyun.com/hjc256/article/details/88096404

本文档介绍如何在Electron中开发一个文件浏览器。在前一部分的基础上，通过添加文件模板和填充内容，将获取到的文件对象转化为图形界面，实现了主界面的初步展示。通过复制模板节点并设置文件图标和名称，成功地在主区域显示了文件列表。

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

先附上Github地址，源码都在这上面。

如果没看过（一），可以点这里

在（一）中，程序已经能够获得home目录和home目录下的所有文件、文件夹的路径所代表的文件对象。可是现在的主界面除了最顶上的工具栏，其它的都是空白。所以我们需要把获得到的那些文件对象转换为图形界面。

首先在html文件中添加文件的模板。

<!-- 单个文件模板 -->
<template id='fileItem-template'>
    <div class="fileItem">
        <img src=<

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Meskjei

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

用Electron开发一个自定义浏览器

XwyMysql的博客

10-06

1352

Electron是一个流行的桌面应用程序开发框架，它基于Web技术栈，可以使用HTML、CSS和JavaScript构建跨平台的桌面应用程序。安装完成后，我们可以开始创建一个新的Electron应用程序。在你选择的项目目录中，创建一个新的文件夹，并切换到该目录。上面的代码创建了一个Electron窗口，加载一个指定的网址，并打开开发者工具。这将创建一个package.json文件，它用于管理我们的应用程序的依赖项和配置。这将启动我们的自定义浏览器应用程序，并加载指定的页面。替换为你想要加载的页面。

用Electron开发一个文件浏览器（一）

Meskjei的博客

03-01

4812

首先先看看这个文件浏览器长什么样子然后上Github地址，源码都在这上面。必须得说明的是，这个应用是看着《跨平台桌面应用开发–Electron与NW.js》来写的，这是书上的一个例子。不过因为书上更多侧重于演示，所以并不完善（当然我的代码也远说不上完善，目前只是补充了几个功能）。文件浏览器打开时默认显示的是home目录。所以需要获取home目录路径。通过引入osenv模块便可实现。 fun...

参与评论您还未登录，请先登录后发表或查看评论

simple-browser-electron：用于开发的简单浏览器

02-09

Navegador Simples Esse projeto teve como基地或 do Mayk Brito。 :laptop_computer: 原始的灵魂 Navegador simples para ajudar nos testes dasaplicações网站，desenvolvido com 。 :spiral_notepad: 先决条件安特斯·德·科马萨尔（Antes decomeçar），维加斯·普雷萨尔·安纳斯·马奎纳（suamáquina）是首选编辑器，没有使用VSCode的。 :game_die: Como Baixar e安装 # Clone este repositório $ git clone https://github.com/brunagoncalves/simple-browser-electron.git # Vá para a pasta do projeto $ cd simple-browser-e

Beaker：一个基于Electron的点对点Web浏览器

cpongo011702

06-14

496

Beaker是一个基于Electron、Chromium和Node.js的实验性、点对点Web浏览器。Beaker包含新的基于Dat的API，用于构建无主机应用程序，同时又保持与传统Web的兼容性。Beaker的团队致力于建立一个人对人的网络。最初，Web在以前无法想象的规模上促成了通信、协作和创造，但是，Beaker的团队表达了他们的沮丧，Web已经发展成了孤立平台的集合，阻碍了定制化和互操作性...

使用Electron开发跨平台本地文件管理器：从入门到实践

最新发布

vvilkin的学习备忘

07-03

1027

在当今数字化时代，文件管理是每个计算机用户日常工作中不可或缺的一部分。虽然操作系统都提供了自己的文件管理器，但开发一个自定义的文件管理器可以带来更好的用户体验、特定功能的集成以及跨平台的一致性。本文将详细介绍如何使用Electron框架构建一个功能完善的本地文件管理器，涵盖从环境搭建到核心功能实现的全过程。

用electron做一个浏览器

微小冷的学习笔记

05-04

9980

文章目录iframe输入网址 iframe electron的窗口控件，实际上就是一个html解析工具，也就是说，通过electron可以用最短的代码，写一个浏览器，甚至可以查看浏览器中网页源代码，如下图中点击View->Toggle Developer Tools 代码只需要一个main.js const {app, BrowserWindow} = require('electron') function createWindow () { const mainWindow = new B

electron-browser:电子浏览器，使用chrome标签样式和BrowserView

03-18

Electron是GitHub推出的一个项目，它结合了Chromium（Google Chrome浏览器的开源版本）和Node.js，使得开发者可以利用Web开发的熟悉工具和API来构建原生桌面应用。Node.js的引入使得Electron应用能够访问操作系统...

vue-electron-chrome：基于电子开发的应用浏览器

01-29

一个基于电子开发的应用浏览器，主要用于网页APP全屏模式运行，使WEB应用看起来更像一个原生应用浏览器主题可定制，配置简单，实现了简单的网页浏览器功能。百度云下载：链接： ://pan.baidu.com/s/1nxh2nBb密码：...

【Electron】酷家乐客户端开发实践分享 — 浏览器启动客户端

weixin_34034261的博客

06-08

917

作者：钟离，酷家乐PC客户端负责人原文地址：webfe.kujiale.com/browser-to-… 酷家乐客户端：下载地址 www.kujiale.com/activity/13… 文章背景：在酷家乐客户端在V12改版成功后，我们积累了许多的宝贵的经验和最佳实践。前端社区里关于Electron知识相对较少，因此希望将这些内容以系列文章的形式分享出来。系列文章：【Electron】酷...

使用Electron的webview组件开发一款无跨域功能的浏览器

xiaocuige007的博客

11-01

7743

浏览器下载地址 1.Webview空白问题问题描述：一下代码webview显示为空白页 <webview class="indexWebview" width='200' height='300' style="display: inline-flex;" src='http://www.baidu.com'></webview> 解决方案 const mainWindow = new BrowserWindow({ webPreferences: { w

browser-base:基于Electron的现代且功能丰富的Web浏览器

04-29

Wexond浏览器库 Wexond Base是一种现代网络浏览器，建立在现代网络技术（例如Electron和React ，该技术也可以用作创建自定义网络浏览器的框架（请参阅“部分）。目录：文献资料执照动机直接编译和编辑Chromium可能是一项艰巨且耗时的工作，因此我们决定使用现代Web技术构建Wexond。因此，大大减少了开发工作量和时间。不管哪种方式，Firefox都是基于Web组件的，而Chrome则在WebUI（本质上托管在WebContents中）中实现了新对话框。特征 Wexond Shield-在没有任何广告的情况下浏览网络，也不允许网站跟踪您。得益于Wexond盾搭载Cliqz ，网站可以加载甚至8倍的速度！没有Google服务且资源使用率低的Chrome-由于Wexond在引擎盖下使用Electron（仅基于几个最重要的Chromium组件），

基于Electron搭建的ssh隧道浏览器主要用于需要通过隧道进行web访问的场景

08-12

基于 `Electron` 搭建的`ssh`隧道浏览器，主要用于需要通过隧道进行 web 访问的场景

goffer:用electron.js编写的漂亮而基本的文件管理器

05-25

戈弗这是一个文件管理器，具有漂亮且易于使用的用户界面，可让您根据类别和标签分离文件。主要隔离是基于类别完成的，您可以向每个文件添加标签。之后，您可以根据文件名或标签进行搜索。此应用程序实际上不会创建文件副本或将其移动到其他位置，而只是将文件编入索引。这只是我作为大学项目制作的迷你应用程序。演示版视频：特征基于材质设计的简单美观的用户界面：各种与UI相关的自定义，用于添加新类别：每个类别都有漂亮的文件浏览器，带有文件键入功能（不同类型的文件使用不同的图标）：根据文件名和带有文件键入的标签进行搜索：可以通过将文件直接拖放到类别中来添加文件。能够添加与文件关联的标签的能力。编辑源代码克隆仓库，然后使用以下命令进行安装： yarn 或者 npm install 跑步 yarn start 或者 npm start 建造为当前平台构建：

folders:使用Electron和Vue构建的文件资源管理器

05-11

资料夹台式机文件夹工作流程应用程序构建设置 # install dependencies npm install # serve with hot reload at localhost:9080 npm run dev # build electron application for production npm run build # lint all JS/Vue component files in `src/` npm run lint 该项目是通过使用 @ 生成的。关于原始结构的文档可以在找到。

Electron-FolderView:浏览文件夹内容，包括图像幻灯片，可播放的视频，视频墙和方便的工具。专为Windows设计

05-26

电子文件夹视图我最初将其创建为nodejs应用程序以查看本地图像。我对自己拥有的免费和付费图像应用程序感到沮丧-我需要一些东西来简单地显示文件夹中的图像。有了许多可用于网络的出色图像处理库，我认为将某些东西放到节点上就足够简单了……然后，我发现了Electron的超赞之处！这个程序可以让我快速添加功能来处理各种文件管理任务。迫在眉睫的是能够快速查看媒体文件，而不会出现笨拙的小部件或ui chrome。使用Electron，我可以在Windows可执行文件中使用Web技术创建具有自定义功能的通用目录浏览器！这是一个正在进行的工作。随意使用和修改。特征主要目的是查看文件夹项目项目功能：复制，剪贴板...，删除，浏览，文件夹大小，打开，移动，重命名，将图像设置为背景，零网格中显示的项目网格功能：隐藏项目，过滤器，文件夹，最后一个文件夹，顺序，缩放，滚动，随机播放，

electron-browser-shell：一款轻量级、支持Chrome扩展的标签式网页浏览器

gitblog_00481的博客

03-27

394

electron-browser-shell：一款轻量级、支持Chrome扩展的标签式网页浏览器 electron-browser-shell 是一个基于 Electron 构建的极简标签式网页浏览器，它支持 Chrome 扩展，为开发者提供了一个测试和开发 Chrome 扩展的绝佳平台。项目介绍 electron-browser-shell 旨在提供一个简单、高效的浏览器环境，用于开发者和普...

为electron添加Chrome扩展程序

花开富贵的博客

12-03

5981

官方文档 Electron支持Chrome DevTools 扩展程序，可增强开发工具调试流行web框架的能力 1.加载 DevTools 扩展程序1.1.下面以[React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)为例：**注意问题：**1.1.1.只有在app模块的ready事件触发之后，才可以调用`BrowserW

electron客户端预览doc、docx、excel、pdf、ppt、csv、txt等文件类型

xiaopiaoliang777的博客

11-18

1143

需求：已知文件路径，通过点击列表页的操作按钮可查看文件内容。实现方式：通过electron的shell.openPath指定系统默认程序直接打开页面

夸克Quark浏览器PC电脑版v1.4.0.47基于electron

05-15

1031

夸克PC版是一款基于electron开发浏览器，天天说eelectron封装了浏览器，这次直接拿来做浏览器。

React-Based Tabs for Electron Apps - 开发自定义浏览器

"browser-tabs" 库的使用场景与 Electron 应用程序紧密相关，因为 Electron 应用程序通常需要一个类似浏览器的环境来展示网页内容。 #### 在 Electron App 中使用 React 浏览器标签当您想创建一个带有标签页的 ...