跳到主要内容

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

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');

第二步：打包配置​

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

打包配置示例

  1. 点击打包，选择保存位置

第三步：运行效果​

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

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

打开ScreenToGif

  1. 点击启动 ScreenToGif 按钮
  2. 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');

注意事项​

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

相关阅读​