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

最新推荐文章于 2024-08-19 21:37:14 发布

Meskjei

最新推荐文章于 2024-08-19 21:37:14 发布

阅读量1.3k

点赞数

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

本文链接：https://blog.csdn.net/hjc256/article/details/88096404

版权

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

摘要由CSDN通过智能技术生成

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

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

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

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

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

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Meskjei

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

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

XwyMysql的博客

10-06

945

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

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

459

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

Electron 集成谷歌扩展实现原理，相关知识点汇集，line插件集成demo，gitee代码，坑点解析

最新发布

王森的博客

08-19

540

目前谷歌扩展有 50W 之多，覆盖面比较广，而 Electron 又是基于谷歌浏览器内核开发的，如果将两者结合，那么就能大大节省很多开发时间，开发出来的客户端功能却更加丰富，不过 Electron 并没有完美支持谷歌扩展，尤其是谷歌扩展 MV3 版本中提供的大量的 API，Electron 本身都是不支持的，这就给开发者一种误导，Electron 不支持 MV3 的扩展。

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

weixin_34034261的博客

06-08

874

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

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

xiaocuige007的博客

11-01

7448

浏览器下载地址 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

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

Meskjei的博客

03-01

4690

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

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做一个浏览器

微小冷的学习笔记

05-04

8434

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

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添加Chrome扩展程序

花开富贵的博客

12-03

5623

官方文档 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

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

weixin_43101805的博客

05-15

697

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

使用Electron开发一个文件管理器

2301_79326616的博客

10-05

380

在本文中，我们将使用Electron来开发一个简单的文件管理器，让用户可以方便地浏览和管理他们的文件。您应该能够看到标题为"文件管理器"的窗口，以及文件列表中的几个文件。在上述示例中，我们使用HTML和CSS设置了一个简单的文件管理器界面，其中包含一个标题和一个文件列表。中，我们将创建一个Electron窗口，并加载一个简单的HTML文件作为应用程序的用户界面。中，我们可以使用HTML和CSS来设置文件管理器的界面。的文件，作为Electron应用程序的入口点。的文件，作为应用程序的用户界面。

【Electron Playground 系列】文件下载篇

xiaoheibanfe的博客

12-17

1372

作者：long.woo 文件下载是我们开发中比较常见的业务需求，比如：导出 excel。 web 应用文件下载存在一些局限性，通常是让后端将响应的头信息改成 Content-Disposition: attachment; filename=xxx.pdf，触发浏览器的下载行为。在 electron 中的下载行为，都会触发 session 的 will-download 事件。在该事件里面可以获取到 downloadItem 对象，通过 downloadItem 对象实现一个简单的文件下载管理器： .

electron 开发一个md工具

07-14

对于使用 Electron 开发一个 Markdown 工具，你可以按照以下步骤进行操作： 1. 首先，确保你已经安装了 Node.js 和 npm（Node.js 包管理器）。 2. 创建一个空文件夹，并在终端中进入该文件夹。 3. 执行以下命令来...