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 的按钮：
html
<!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>核心代码只有一行：
js
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。
建议在调用前做一下判断：
js
if (window.HTMLPackHelper) {
window.HTMLPackHelper.open('ScreenToGif.exe');
} else {
alert('当前环境不支持此功能');
}不仅可以打开EXE
open API 本质上调用的是系统的默认打开方式，因此不限于EXE文件：
js
// 打开一个附件PDF文档
window.HTMLPackHelper.open('使用手册.pdf');
// 打开一个附件文件夹
window.HTMLPackHelper.open('data');
// 打开一个附件图片
window.HTMLPackHelper.open('help.png');注意事项
- 启用API ：使用
HTMLPackHelper.open()前必须在高级配置中勾选启用API - 文件体积：附件文件会增加打包后的EXE体积，建议使用便携版/单文件版工具
- 路径中的空格：如果文件名包含空格，直接传入即可，不需要额外处理
- 安装版EXE：附件文件同样会被包含在安装包中，安装后位于安装目录下
- 杀毒软件：部分杀毒软件可能对打包的EXE中包含其他EXE文件产生误报，建议发布前测试