使用JSZip打包下载GLTF模型时仅含文件路径的问题求助

你当前代码里的model.file应该是文件路径字符串或者URL，JSZip会直接把这个字符串当作文件内容写入，而不是去读取对应路径/URL的实际文件数据，所以压缩包里的gltf文件只有路径文本，没有模型内容。

核心是先获取GLTF文件的实际内容（文本或Blob），再传给JSZip。根据model.file的类型，分两种情况处理：

修改后的完整代码 #

async function downloadModel(id) {
  const model = await this.fetchModel(id);
  const JSZip = require("jszip");
  const zip = new JSZip();

  // 添加README文件
  zip.file("README.txt", "Text\nText");

  // 关键：获取GLTF的实际内容
  let gltfContent;
  if (typeof model.file === 'string') {
    // 情况1：model.file是文件URL，用fetch拉取内容
    const res = await fetch(model.file);
    if (!res.ok) throw new Error(`无法获取GLTF文件：${res.statusText}`);
    // GLTF是JSON格式，用text()获取；如果是GLB二进制文件，改用res.blob()
    gltfContent = await res.text();
  } else if (model.file instanceof Blob || model.file instanceof File) {
    // 情况2：model.file是前端File/Blob对象，直接读取内容
    gltfContent = await model.file.text();
  } else {
    throw new Error("不支持当前的GLTF文件类型");
  }

  // 将实际内容写入压缩包
  zip.file(`${model.name}.gltf`, gltfContent);
  
  // 如果需要添加纹理，这里要类似处理纹理文件，比如：
  // const textures = await this.fetchModelTextures(id);
  // const textureFolder = zip.folder("textures");
  // textures.forEach(texture => {
  //   // 同样方式获取纹理内容后添加到textureFolder
  // });

  // 生成压缩包并下载
  const zipBlob = await zip.generateAsync({ type: "blob" });
  saveAs(zipBlob, `${model.name}.zip`);
}

额外注意事项 #

• 如果你的模型是GLB格式（二进制），不要用text()，改用res.blob()获取二进制数据，再传给JSZip
• 如果GLTF文件跨域，确保目标服务器配置了CORS允许跨域请求，否则fetch会失败
• 你当前的zip.folder("textures")只是创建空文件夹，如果模型有纹理，需要同样的逻辑获取纹理文件内容并添加到该文件夹下

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