event.dataTransfer.files 获取的是压缩包文件本身，浏览器原生不支持解压，需用 JSZip 等库前端解压或交由后端处理；移动端不支持拖拽压缩包，应改用 代替。

event.dataTransfer.files 拿到的不是压缩包内容，而是压缩包文件本身——想解压，浏览器原生不支持 zip 或 tar.gz 解析，必须引入第三方库或换思路。

---

drop 事件里拿到的是压缩包文件，不是解压后的内容

File 对象只代表用户拖进来的那个 .zip 或 .rar 文件，它的 type 是 application/zip（或空），size 是压缩包体积。
你不能直接用 FileReader.readAsText() 去读它——那只会读出二进制乱码；也不能指望 dataTransfer.files[0].text() 自动解压。

• 常见错误现象：控制台报错 DOMException: Failed to execute 'readAsText' on 'FileReader': The requested file could not be read.，或读出来一堆
• 真实限制：HTML5 File API 不提供任何解压能力，这是刻意设计的安全隔离
• 替代路径只有两条：
  • 前端用 JS 解压库（如 JSZip、fflate）在内存中解压
  • 后端接收压缩包，由服务端解压并返回文件列表或内容

---

想纯前端解压，必须用 JSZip 这类库，且注意兼容性

JSZip 是目前最成熟的选择，支持 ZIP、unZIP，但不支持 RAR、7z、tar.gz（除非额外配 fflate + tar-stream）。

• 使用前确认：
  • JSZip.loadAsync(file) 接收 File 或 Blob，返回 Promise
  • 解压过程是纯内存操作，大压缩包（>100MB）容易卡死或 OOM
  • Safari 对大型 ArrayBuffer 操作更敏感，建议加 try/catch 并限制单个压缩包 ≤ 50MB
• 示例关键片段：

  const zip = await JSZip.loadAsync(file);
  const files = Object.keys(zip.files);
  for (const filename of files) {
  const zipEntry = zip.files[filename];
  if (!zipEntry.dir) {
    const content = await zipEntry.async('uint8array'); // 或 'string' / 'blob'
    // 处理单个文件内容
  }
  }

• 别踩坑：
  • 不要用 readAsDataURL() 先转 base64 再喂给 JSZip，多一次编码浪费内存
  • 解压后生成的 Blob 或 Uint8Array，若要预览图片，仍得走 URL.createObjectURL()，用完立刻 revoke

---

解压后 index.html 打不开？大概率是 file:// 协议限制

即使你成功用 JSZip 解出 index.html 和配套资源，双击打开它仍是空白页。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 根本原因：file:// 下浏览器禁止跨文件加载 JS/CSS/JSON，哪怕都在同一目录
• 正确做法：
  • 把解压后的整个目录扔进本地服务跑：VS Code 的 Live Server、npx http-server、或 Python 的 python3 -m http.server
  • 或把解压逻辑和渲染逻辑打包进一个单页应用（如用 JSZip + iframe sandbox 动态注入 HTML，但受限于同源策略和 script 执行权限，非常脆弱）

---

移动端拖拽压缩包？根本不可行

iOS Safari 和 Android Chrome 均不触发 dragover/drop 事件，用户连“拖一个 ZIP 进网页”这个动作都完成不了。

立即学习“前端免费学习笔记（深入）”；

• 不要尝试监听 touchstart 模拟拖拽——它无法访问 dataTransfer.files
• 真实可行路径只有一条：隐藏 <input type="file" accept=".zip,.rar">，样式覆盖成按钮，点击唤起文件选择器
• 注意：Android 原生文件选择器支持 ZIP，但 iOS 仅支持文档类型（public.data），ZIP 可能被过滤掉，需 fallback 提示“请用电脑操作”

真正难的不是“怎么解压”，而是分清边界：哪些必须交由后端做（安全校验、大包解压、路径遍历防护），哪些可以前端轻量处理（小 ZIP 预览、单文件提取）。混淆这两层，轻则功能失效，重则内存崩掉、用户误以为上传成功但服务端根本没收到。