100个酷炫的数据可视化大屏总有一款适合你(含演示实例)，30款 vue3 数据可视化大屏登录页下载

使用electron开发一款单页模板下载助手

electron yekong

以前工作时，用到过一款工具叫单页模板扒手，觉得开发者好厉害，一直想着自己也能做一块这样的小工具，于是今天开始行动。

开发工具

因为自己只会前端开发，所以选择用js来实现，开发环境nodejs加electron。

Electron 是一款开放源代码库，可用于构建跨平台桌面应用程序。通过 Electron，你可以使用 Web 技术（如 HTML、CSS 和 JavaScript）来开发原生应用程序。Electron 应用程序可以在 macOS、Windows 和 Linux 上运行。

node环境版本

v16.20.0

electron版本

"electron": "^21.4.4",

初始化项目

如何初始化使用electron

首先初始化一个项目，ui界面没有啥东西，渲染端页面就使用普通的html来实现。这样一个ui界面就出来了。

初始化项目

显示开发工具

前端开发怎么少的了开发工具呢？electron如何让浏览器显示开发工具.

关键代码

 // 打开开发者工具
  win.webContents.openDevTools();

粘贴功能

页面中我们需要给按钮增加一个粘贴功能，以便于用户可以将网址粘贴到页面中。

function pasteContent() {
    navigator.clipboard.readText().then(text => {
        document.getElementById('download').value = text;
    }).catch(err => {
        console.error('Failed to read clipboard content:', err);
    });
}

选择目录

我们还需要一个功能，可以点击按钮然后弹出选择目录选择完成后，路径会显示在保存位置中。这里需要渲染进程与主进程进行通信，主进程选择完目录然后将目录路径返回给渲染进程。

electron实现点击按钮选择目录效果

日志反馈

再然后我们还需要一个日志反馈，当用户点击下载按钮后，我们需要知道让用户知道当前是啥情况，这就需要一个日志了。在主进程操作文件的时候，需要将操作情况发送给渲染进程，反馈给用户。

electron 主进程向渲染进程发送消息

校验下载地址以及保存位置

在用户点击下载按钮时，我们需要对下载地址进行校验，页面必须是http或者https开头的页面，保存位置不能为空。这里我们还需要一个弹窗，用来给用户反馈.这里使用的弹窗组件是layer.

校验下载地址以及保存位置

function startDownload() {
    const downloadUrl = document.getElementById('download').value;
    const savePath = document.getElementById('save').value;

    // 验证下载URL
    const pattern = /^https?:\/\//;
    if (!pattern.test(downloadUrl)) {
        console.error('下载地址必须包含 http 或 https');
        layer.msg('下载地址必须包含 http 或 https');
        return false;
    }

    // 验证保存路径不能为空
    if (!savePath || savePath.trim() === '') {
        console.error('保存路径不能为空');
        layer.msg('保存路径不能为空');
        return false;
    }

    // 发送消息到主进程
    window.electron.startDownload(downloadUrl, savePath);
}

请求页面

到这里我们需要请求页面，请求页面我们使用axios来获取页面代码。如果对axios不了解的话，可以查看axios插件介绍及使用

获取代码

我们获取到页面代码

const response = await axios.get(downloadUrl);
let htmlContent = response.data;

保存文件

将获取到的代码保存为index.html,保存文件我们使用fs来完成。

// 保存更新后的HTML内容为本地文件
const htmlFilePath = path.join(savePath, 'index.html');
fs.writeFileSync(htmlFilePath, htmlContent, 'utf8');
sendMessage('页面下载完成')

创建目录

我们需要
创建js目录用来存放js文件，
创建css目录用来存放css文件，
创建images目录用来存放图片，
创建fonts目录用来存放字体文件。

工具需要考虑mac系统和win系统，所以要考虑目录拼接问题，我们使用了 path.join 方法来确保路径在不同操作系统上正确拼接。当用户通过 open-dialog 选择一个目录时，这个目录将与你提供的子目录名 (js, css, images, fonts) 结合，然后在该位置创建这些子目录。

const fs = require('fs');

// 创建目录
function createDirectory(directory) {
    fs.mkdir(directory, {recursive: true}, (err) => {
        if (err) {
            if (err.code === 'EEXIST') {
                sendMessage(`${directory} 目录已存在。`);
            } else {
                sendMessage(`创建 ${directory} 目录出错:`, err);
            }
        } else {
            sendMessage(`${directory} 目录创建成功！`);
        }
    });
}

function createDirectories(savePath, directories) {
    directories.forEach(directory => {
        // 使用 path.join 来确保路径在不同操作系统上正确拼接
        const fullDirectoryPath = path.join(savePath, directory);
        createDirectory(fullDirectoryPath);
    });
}


// 创建目录
createDirectories(savePath, directories);

sendMessage('开始下载')

保存css文件

nodejs 保存一个页面中的css文件，我们需要考虑很多情况。nodejs 保存一个页面中的css文件。

我们需要考虑很多细节

文件路径问题，相对路径和绝对路径都要可以访问到文件。

文件命名，需要考虑重名的问题

需要考虑css文件内引入的图片以及字体等等。

喜欢