当前位置：首页 > 教程 > 正文内容

HTML打包EXE使用附件功能调用外部程序扩展你的EXE - 附实战演练实现录频功能

教程4

HTML打包EXE工具支持附件文件功能，可以将额外的文件或文件夹与HTML项目一起打包进EXE。打包后的附件会和EXE放在同一目录下，运行时可以直接访问。配合 HTMLPackHelper.open() API，可以实现从HTML页面中启动外部程序的功能。

本文通过一个实际案例——将开源截图录屏工具 ScreenToGif 打包进EXE，点击按钮即可启动，来完整演示附件文件功能的使用方法。

下载最新版本

功能入口

在打包工具快速打包标签页中，可以找到附件文件配置项：

点击配置附件按钮，会弹出附件管理对话框。

附件管理对话框

在对话框中可以进行以下操作：

添加文件：选择一个或多个文件作为附件
添加文件夹：选择整个文件夹作为附件（文件夹内所有内容都会被打包）
移除：删除不需要的附件项
清空：一键清除所有附件

对话框中会显示每个附件的类型标记：

🔵 文件：单个文件
🟠 文件夹：整个目录
🔴 不存在：文件路径无效（打包时会跳过）

附件文件的存放位置

打包后，附件文件会被放到与EXE同级的目录下。例如：

MyApp/
├── MyApp.exe
├── ScreenToGif.exe      ← 附件文件
├── tools/               ← 附件文件夹
│   ├── tool1.exe
│   └── tool2.bat
└── ...（其他打包生成的文件）

如果选择的是安装版EXE，附件文件会被包含在安装包中，安装后同样位于应用安装目录下。如果选择的是绿色版EXE, 附件文件会被嵌入到EXE里面, 可以使用相对于EXE的路径去获取.

实战演示：集成 ScreenToGif 截图录屏工具

关于 ScreenToGif

ScreenToGif是一款开源免费的屏幕录制工具（MIT 协议），支持：

屏幕录制并导出为 GIF/视频
区域截图
内置编辑器，可添加文字、边框等

它是一个单文件便携版EXE（约几MB），非常适合作为附件打包。

第一步：准备HTML文件

创建一个 index.html 文件，包含一个启动 ScreenToGif 的按钮：

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>我的工具箱</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body {
                font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
                background: #f0f2f5;
                min-height: 100vh;
                padding: 40px 20px;
            }
            .header {
                text-align: center;
                margin-bottom: 30px;
            }
            .header h1 {
                font-size: 22px;
                color: #333;
                font-weight: 600;
            }
            .header p {
                color: #999;
                font-size: 13px;
                margin-top: 6px;
            }
            .tool-list {
                max-width: 480px;
                margin: 0 auto;
            }
            .tool-item {
                background: #fff;
                border: 1px solid #e8e8e8;
                border-radius: 8px;
                padding: 16px 20px;
                margin-bottom: 12px;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
            .tool-info {
                display: flex;
                align-items: center;
                gap: 12px;
            }
            .tool-icon {
                width: 40px;
                height: 40px;
                background: #e6f7ff;
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 20px;
                flex-shrink: 0;
            }
            .tool-name {
                font-size: 15px;
                font-weight: 500;
                color: #333;
            }
            .tool-desc {
                font-size: 12px;
                color: #999;
                margin-top: 2px;
            }
            .btn-open {
                background: #1890ff;
                color: #fff;
                border: none;
                border-radius: 4px;
                padding: 6px 16px;
                font-size: 13px;
                cursor: pointer;
                white-space: nowrap;
                flex-shrink: 0;
            }
            .btn-open:hover {
                background: #40a9ff;
            }
        </style>
    </head>
    <body>
        <div class="header">
            <h1>我的工具箱</h1>
            <p>点击"打开"按钮即可启动对应工具</p>
        </div>
        <div class="tool-list">
            <div class="tool-item">
                <div class="tool-info">
                    <div class="tool-icon">🎬</div>
                    <div>
                        <div class="tool-name">ScreenToGif</div>
                        <div class="tool-desc">屏幕录制工具，支持录屏、截图、GIF导出</div>
                    </div>
                </div>
                <button class="btn-open" onclick="openTool('ScreenToGif.exe')">打开</button>
            </div>
        </div>

        <script>
            function openTool(fileName) {
                if (window.HTMLPackHelper) {
                    window.HTMLPackHelper.open(fileName);
                } else {
                    alert('请在打包后的EXE中运行，当前环境不支持此功能');
                }
            }
        </script>
    </body>
</html>

核心代码只有一行：

window.HTMLPackHelper.open('ScreenToGif.exe');

第二步：打包配置

打开HTML打包EXE工具
本地html主文件：选择上面创建的 index.html
附件文件：点击配置附件 → 添加文件 → 选择下载好的 ScreenToGif.exe
在高级配置中勾选启用API（必须开启，否则 HTMLPackHelper 不可用）

点击打包，选择保存位置

第三步：运行效果

打包完成后，运行生成的EXE：

程序启动后显示工具箱界面

点击启动 ScreenToGif 按钮
ScreenToGif 程序被成功启动

open API 说明

HTMLPackHelper.open(itemPath) 用于打开一个文件或启动一个程序。

路径规则

路径类型	示例	说明
相对路径	`"ScreenToGif.exe"`	相对于EXE所在目录
相对路径（子目录）	`"tools/mytool.exe"`	EXE所在目录下的子目录
绝对路径	`"C:\\Windows\\notepad.exe"`	直接使用绝对路径

大多数情况下使用相对路径即可，因为附件文件打包后就在EXE同级目录下。

前置条件

使用 HTMLPackHelper.open() 需要在打包时勾选启用API选项（位于高级配置标签页）。如果未开启API，window.HTMLPackHelper 将为 undefined。

建议在调用前做一下判断：

if (window.HTMLPackHelper) {
    window.HTMLPackHelper.open('ScreenToGif.exe');
} else {
    alert('当前环境不支持此功能');
}

不仅可以打开EXE

open API 本质上调用的是系统的默认打开方式，因此不限于EXE文件：

// 打开一个附件PDF文档
window.HTMLPackHelper.open('使用手册.pdf');

// 打开一个附件文件夹
window.HTMLPackHelper.open('data');

// 打开一个附件图片
window.HTMLPackHelper.open('help.png');

注意事项

启用API：使用 HTMLPackHelper.open() 前必须在高级配置中勾选启用API
文件体积：附件文件会增加打包后的EXE体积，建议使用便携版/单文件版工具
路径中的空格：如果文件名包含空格，直接传入即可，不需要额外处理
安装版EXE：附件文件同样会被包含在安装包中，安装后位于安装目录下
杀毒软件：部分杀毒软件可能对打包的EXE中包含其他EXE文件产生误报，建议发布前测试

HTML打包EXE使用附件功能调用外部程序扩展你的EXE - 附实战演练实现录频功能

下载最新版本

功能入口

附件管理对话框

附件文件的存放位置

实战演示：集成 ScreenToGif 截图录屏工具

关于 ScreenToGif

第一步：准备HTML文件

第二步：打包配置

第三步：运行效果

open API 说明

路径规则

前置条件

不仅可以打开EXE

注意事项

相关阅读

Copyright YLong软件 Rights Reserved.