











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是一款开源免费的屏幕录制工具(MIT 协议),支持:
它是一个单文件便携版EXE(约几MB),非常适合作为附件打包。
创建一个 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');
index.htmlScreenToGif.exeHTMLPackHelper 不可用)
打包完成后,运行生成的EXE:


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('当前环境不支持此功能');
}
open API 本质上调用的是系统的默认打开方式,因此不限于EXE文件:
// 打开一个附件PDF文档
window.HTMLPackHelper.open('使用手册.pdf');
// 打开一个附件文件夹
window.HTMLPackHelper.open('data');
// 打开一个附件图片
window.HTMLPackHelper.open('help.png');
HTMLPackHelper.open() 前必须在高级配置中勾选启用API此内容由惯性聚合(RSS阅读器)自动聚合整理,仅供阅读参考。 原文来自 — 版权归原作者所有。