Electron 项目实现下载文件监听

news/2024/11/16 11:41:54/

Electron 项目实现下载文件监听

随着现代应用程序功能的不断扩展,用户对下载文件的需求也越来越高。特别是在 Electron 应用程序中,提供一个高效、可靠的下载管理功能是提升用户体验的
关键之一。本文将详细介绍如何在 Electron 项目中实现下载文件的监控,包括进度信息的实时更新,并将这些信息返回给前端。同时,还会讲解如何避免用户点击下载按钮时弹出下载对话框,
直接下载到设置的默认路径。本文将为你提供详细的步骤和代码示例,帮助你快速实现这一功能。

目标
  1. 实现下载文件的监听,包括下载进度和最终状态。
  2. 将下载详细信息发送到前端并实时显示。
  3. 避免用户点击下载按钮时弹出下载对话框,直接下载到设置的默认路径。
步骤
  1. 设置项目环境
  2. 创建主窗口
  3. 监听下载事件
  4. 发送下载状态到前端
  5. 前端接收并显示下载状态
  6. 避免弹出下载对话框

1. 设置项目环境

首先,确保你已经安装了 Electron。如果还没有安装,可以使用以下命令进行安装:

npm install electron --save-dev

2. 创建主窗口

在项目的主文件(通常是 main.js)中,创建主窗口并加载前端页面。

javascript">const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');let mainWindow;function createWindow() {mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {nodeIntegration: true,contextIsolation: false,preload: path.join(__dirname, 'preload.js')}});mainWindow.loadFile('index.html');
}app.on('ready', async () => {await createWindow();
});

3. 监听下载事件

main.js 中,监听 will-download 事件,设置默认下载路径,并监控下载状态。

javascript">const { app, BrowserWindow, session, ipcMain } = require('electron');
const path = require('path');let mainWindow;function createWindow() {mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {nodeIntegration: true,contextIsolation: false,preload: path.join(__dirname, 'preload.js')}});mainWindow.loadFile('index.html');
}app.on('ready', async () => {await createWindow();let session = mainWindow.webContents.session;session.on('will-download', (event, item, webContents) => {// 获取当前用户的下载文件夹路径const defaultDownloadPath = app.getPath('downloads');const suggestedFileName = item.getFilename();const savePath = path.join(defaultDownloadPath, suggestedFileName);// 设置下载项的保存路径item.setSavePath(savePath);// 发送下载开始信息到前端mainWindow.webContents.send('download-started', { filename: suggestedFileName, savePath });// 初始化已接收字节数let receivedBytes = 0;// 监听下载进度item.on('updated', (event, state) => {if (state === 'interrupted') {mainWindow.webContents.send('download-interrupted', { filename: suggestedFileName });} else if (state === 'progressing') {if (item.isPaused()) {mainWindow.webContents.send('download-paused', { filename: suggestedFileName });} else {receivedBytes = item.getReceivedBytes();let progress = Math.round((receivedBytes / item.getTotalBytes()) * 100);mainWindow.webContents.send('download-progress', { filename: suggestedFileName, progress });}}});// 监听下载完成item.once('done', (event, state) => {if (state === 'completed') {mainWindow.webContents.send('download-completed', { filename: suggestedFileName, savePath });} else {mainWindow.webContents.send('download-failed', { filename: suggestedFileName, error: state });}});});
});

4. 发送下载状态到前端

在上面的代码中,我们使用 mainWindow.webContents.send 方法将下载状态发送到前端。这些状态包括下载开始、下载进度、下载中断、下载暂停和下载完成。

5. 前端接收并显示下载状态

在前端页面(通常是 index.html)中,使用 Electron 的 ipcRenderer 模块接收这些状态并显示。

index.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Electron Download Monitor</title><style>body {font-family: Arial, sans-serif;}.download-status {margin-top: 20px;}</style>
</head>
<body><h1>Electron Download Monitor</h1><button id="download-button">开始下载</button><div id="download-status" class="download-status"></div><script src="renderer.js"></script>
</body>
</html>
renderer.js
javascript">const { ipcRenderer } = require('electron');document.getElementById('download-button').addEventListener('click', () => {// 触发下载操作ipcRenderer.send('start-download');
});// 监听下载开始事件
ipcRenderer.on('download-started', (event, data) => {const statusDiv = document.getElementById('download-status');statusDiv.innerHTML += `<p>下载开始: ${data.filename}${data.savePath}</p>`;
});// 监听下载进度事件
ipcRenderer.on('download-progress', (event, data) => {const statusDiv = document.getElementById('download-status');statusDiv.innerHTML += `<p>下载进度: ${data.filename} - ${data.progress}%</p>`;
});// 监听下载中断事件
ipcRenderer.on('download-interrupted', (event, data) => {const statusDiv = document.getElementById('download-status');statusDiv.innerHTML += `<p>下载中断: ${data.filename}</p>`;
});// 监听下载暂停事件
ipcRenderer.on('download-paused', (event, data) => {const statusDiv = document.getElementById('download-status');statusDiv.innerHTML += `<p>下载暂停: ${data.filename}</p>`;
});// 监听下载完成事件
ipcRenderer.on('download-completed', (event, data) => {const statusDiv = document.getElementById('download-status');statusDiv.innerHTML += `<p>下载完成: ${data.filename} 保存到 ${data.savePath}</p>`;
});// 监听下载失败事件
ipcRenderer.on('download-failed', (event, data) => {const statusDiv = document.getElementById('download-status');statusDiv.innerHTML += `<p>下载失败: ${data.filename} - 错误: ${data.error}</p>`;
});

6. 避免弹出下载对话框

在上面的代码中,我们已经在 will-download 事件的回调函数中设置了默认下载路径,从而避免弹出下载对话框。具体代码如下:

javascript">session.on('will-download', (event, item, webContents) => {// 获取当前用户的下载文件夹路径const defaultDownloadPath = app.getPath('downloads');const suggestedFileName = item.getFilename();const savePath = path.join(defaultDownloadPath, suggestedFileName);// 设置下载项的保存路径item.setSavePath(savePath);// 发送下载开始信息到前端mainWindow.webContents.send('download-started', { filename: suggestedFileName, savePath });// 初始化已接收字节数let receivedBytes = 0;// 监听下载进度item.on('updated', (event, state) => {if (state === 'interrupted') {mainWindow.webContents.send('download-interrupted', { filename: suggestedFileName });} else if (state === 'progressing') {if (item.isPaused()) {mainWindow.webContents.send('download-paused', { filename: suggestedFileName });} else {receivedBytes = item.getReceivedBytes();let progress = Math.round((receivedBytes / item.getTotalBytes()) * 100);mainWindow.webContents.send('download-progress', { filename: suggestedFileName, progress });}}});// 监听下载完成item.once('done', (event, state) => {if (state === 'completed') {mainWindow.webContents.send('download-completed', { filename: suggestedFileName, savePath });} else {mainWindow.webContents.send('download-failed', { filename: suggestedFileName, error: state });}});
});

总结

通过以上步骤,你可以在 Electron 项目中实现下载文件的监控,并将下载状态(包括进度信息)返回给前端。这样,用户可以实时看到下载的进度和结果。从设置项目环境到监听下载事件,再到将下载状态发送到前端并实时显示,每一步都经过详细讲解和代码示例展示。此外,还讲解了如何避免用户点击下载按钮时弹出下载对话框,直接下载到设置的默认路径。


http://www.ppmy.cn/news/1547439.html

相关文章

确保以管理员权限运行 Visual Studio 开发者命令提示符

文章目录 解决方法&#xff1a;1. 以管理员身份运行命令提示符2. 改变目录权限3. 改变项目目录位置4. 检查文件系统权限 总结&#xff1a; ********************************************************************** ** Visual Studio 2022 Developer Command Prompt v17.12.0 …

网关在能源物联网中扮演了什么角色?

随着通信、物联网、云平台等技术的飞速发展&#xff0c;越来越多能源用户希望借助先进的管理手段&#xff0c;对能源进行分布式监测、集中管理&#xff0c;构建能源物联网。准确的分布式监测和集中管理有助于制定更科学合理的节能减排计划。企业或能源使用单位可以依据能源物联…

论文 | The Capacity for Moral Self-Correction in LargeLanguage Models

概述 论文探讨了大规模语言模型是否具备“道德自我校正”的能力&#xff0c;即在收到相应指令时避免产生有害或偏见输出的能力。研究发现&#xff0c;当模型参数达到一定规模&#xff08;至少22B参数&#xff09;并经过人类反馈强化学习&#xff08;RLHF&#xff09;训练后&…

4.1 Android NDK 简介

原生开发套件&#xff08;NDK&#xff09;是一套工具&#xff0c;使您能够在 Android 应用中使用 C/C 代码&#xff0c;并提供众多平台库&#xff0c;您可以使用这些平台库管理原生 activity 和访问实体设备组件&#xff0c;例如传感器和触控输入。如果您需要实现以下一个或多个…

Essential Cell Biology--Fifth Edition--Chapter one (6)

1.1.4.4 Internal Membranes Create Intracellular Compartments with Different Functions [细胞膜形成具有不同功能的细胞内隔室] 细胞核、线粒体和叶绿体并不是真核细胞中唯一的膜包围细胞器。细胞质中含有大量的[ a profusion of]其他细胞器&#xff0c;这些细胞器被单层膜…

机器学习【激活函数】

笔记内容侵权联系删 激活函数的概念神经网络中的每个神经元节点接受上一层神经元的输出值作为本神经元的输入值&#xff0c;并将输入值传递给下一层&#xff0c;输入层神经元节点会将输入属性值直接传递给下一层(隐层或输出层)。在多层神经网络中&#xff0c;上层节点的输入在加…

RA-L开源:Light-LOAM: 基于图匹配的轻量级激光雷达里程计和地图构建

文章目录 摘要一、介绍二、 相关工作三、 Light-LOAMA. 特征提取与选择B. 基于图的两阶段特征匹配C. 一致性引导的激光雷达里程计D. 轻量化LiDAR建图 四、实验五、总结 摘要 代码&#xff1a;github 原文&#xff1a;原文 将SLAM应用于机器人应用中&#xff0c;可靠性和效率是…

PC上浏览器是如何查询DNS 缓存的呢?

通过 ipconfig /displaydns 的显示结果可以获取本机的 DNS 缓存信息&#xff0c;那么浏览器是如何获取本机的 DNS 缓存。 答案是&#xff1a;浏览器获取本机的 DNS 缓存主要是通过操作系统提供的接口来获取&#xff0c;。 具体的获取途径如下&#xff1a; 先查询自身缓存&am…