Electron 项目实现下载文件监听

🕗 发布于 2024-11-14 06:36 electron 状态模式 javascript

Electron 项目实现下载文件监听

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

目标

实现下载文件的监听，包括下载进度和最终状态。
将下载详细信息发送到前端并实时显示。
避免用户点击下载按钮时弹出下载对话框，直接下载到设置的默认路径。

步骤

设置项目环境
创建主窗口
监听下载事件
发送下载状态到前端
前端接收并显示下载状态
避免弹出下载对话框

1. 设置项目环境

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

npm install electron --save-dev

2. 创建主窗口

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

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 事件，设置默认下载路径，并监控下载状态。

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`

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 事件的回调函数中设置了默认下载路径，从而避免弹出下载对话框。具体代码如下：

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

原文地址：https://blog.csdn.net/ashyyyy/article/details/143730284

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：Ubuntu 的 ROS 操作系统 turtlebot3 SLAM仿真
下一篇：aws中AcmClient.describeCertificate返回值中没有ResourceRecord

C++组合复用中，委托的含义与作用
委托是一种软件设计技术，它允许一个对象在处理某个请求时，将请求的处理责任转移给另一个对象。
阅读更多2024-11-17
vue 获取摄像头拍照，并旋转、裁剪生成新的图片
注意：以下代码中包含多个业务逻辑，A3/A4、横版/竖版、旋转指定角度、自动裁剪（opencv.js）、自动裁剪识别失败后自动弹出手动裁剪弹窗（cropperjs）等，可按需获取, 此处只做简单记录。
阅读更多2024-11-17
CC6学习记录
CC6学习记录
阅读更多2024-11-17
LPDDR4芯片学习（四）——DDR Training
Write Leveling的基本过程是，DDR进入Write Leveling后，用DQS的上升沿采样CLK信号的状态，然后将采样结果通过DQ pin 反馈给MC，MC根据收到的反馈结果后调整CLK
阅读更多2024-11-17
html + css 自适应首页布局案例
一个自适应的html首页布局。
阅读更多2024-11-17
GRU(门控循环单元)详解
GRU详细的分析
阅读更多2024-11-17
演员王子辰—专注革命题材《前行者》后再出发
王子辰表示，在震撼与真实的拍摄现场，穿着军装，奔跑在炸点的轰鸣之中，血脉沸腾，仿佛自己真的变成了自己父辈的样子，好像有着说不出来的坚定的意识信念。革命战争题材的戏非常艰苦，但他从业以来最大的心愿就是通
阅读更多2024-11-17
uniapp适配暗黑模式配置plus.nativeUI.setUIStyle适配DarkMode配置
设置原生界面样式（暗黑模式）plus.nativeUI.setUIStyle(style);iOS13+系统支持暗黑模式，可设置原生界面的外观样式为浅色或深色（暗黑模式）。即使应用没有设置"
阅读更多2024-11-17
java-Day07 包装类异常+自定义异常
自定义异常实现步骤:1.创建类继承RuntimeException2.重写构造器( 一个带message错误信息 ) 传递message3.在需要抛出异常的位置上 throw new MyExcep
阅读更多2024-11-17
‘v-scale-screen‘使用（Vue框架的大屏幕自适应组件）
是一个用于 Vue 框架的大屏幕自适应组件。它可以帮助开发者在开发大屏幕项目时实现屏幕的自适应，支持根据宽度、高度以及宽高比进行自适应调整，并且支持全屏自适应。这个组件适用于 Vue 2.7 及以上版
阅读更多2024-11-17

Electron 项目实现下载文件监听

Electron 项目实现下载文件监听

目标

步骤

1. 设置项目环境

2. 创建主窗口

3. 监听下载事件

4. 发送下载状态到前端

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

index.html

renderer.js

6. 避免弹出下载对话框

总结

相关文章

`index.html`

`renderer.js`