用户下载文件时能否在其设备上创建指定文件夹结构存放.png资源？

浏览器原生没有直接批量写入本地多级目录的通用能力，目前通用的落地实现是将整个预设目录+PNG资源打包为压缩包后提供下载，用户解压后即可得到完整的规划结构。以下是不同场景的可选实现方案：

1. 前端纯浏览器实现（无后端依赖） #

核心是通过纯前端压缩库在内存中构建完整目录结构，打包后触发下载，适合资源总大小不超过500M的轻量场景：

• 依赖工具：使用JSZip这类纯JS压缩库，无需服务端支持
• 具体实现步骤：
  1. 初始化压缩包实例，创建预设的根主文件夹：const mainFolder = new JSZip().folder("预设主文件夹名称")
  2. 遍历你提前定义的10个子文件夹名称，逐个创建子文件夹实例：const subFolder = mainFolder.folder("对应子文件夹名称")
  3. 将分类好的PNG资源（支持Blob、Base64、远程拉取的二进制流等格式）写入对应子文件夹路径：subFolder.file("xxx.png", 图片二进制数据, {binary: true})
  4. 所有文件写入完成后生成压缩包，触发浏览器下载，参考代码：

  zip.generateAsync({type:"blob"})
  .then(function(zipContent) {
    const downloadLink = document.createElement('a');
    downloadLink.href = URL.createObjectURL(zipContent);
    downloadLink.download = "资源导出包.zip";
    downloadLink.click();
    // 释放内存
    URL.revokeObjectURL(downloadLink.href);
  });
  

• 注意事项：如果PNG资源存放在第三方域名下，需要资源服务端配置CORS规则允许前端拉取二进制数据，否则会出现跨域拉取失败问题。

2. 后端实现（适合大体积/大数量资源场景） #

如果PNG总大小超过500M、或者单包图片数量过千，建议用后端打包方案，避免占用用户浏览器内存导致页面卡顿：

• 核心逻辑：后端按预设的目录结构动态构建压缩流，直接返回给前端触发下载，不需要生成临时文件占用服务器存储
• 不同语言的核心依赖：
  • Node.js 可使用archiver或adm-zip库
  • Python 可使用标准库zipfile实现
  • Java 可使用ZipOutputStream流式构建压缩包
• 优势：打包性能稳定，不会受用户设备性能限制，适合面向公网用户的生产场景。

3. 特定场景可选方案（仅Chromium内核桌面浏览器可用） #

如果你的使用场景是内网受控环境，用户统一使用Chrome/Edge类Chromium内核浏览器，可以用文件系统访问API（File System Access API），无需打包压缩：直接申请用户本地目录的写入权限，按预设结构创建主文件夹、10个子文件夹，再将PNG逐个写入对应路径即可。该方案不需要用户手动解压，但兼容性极差，不适合公网场景使用。

内容的提问来源于stack exchange，提问作者James Mummery