使用JSZip从PNG数组创建Zip包时遇报错或压缩包损坏问题求助

核心问题点 #

1. 客户端Blob构造错误：直接将Buffer传入Blob构造器，而非包裹在数组中，导致生成的Blob内容格式完全错误。
2. 服务端冗余编码转换：将Blob转成ArrayBuffer→Buffer→Base64，多次转换增加出错概率；同时生成Zip时先转Blob再转回Buffer，完全属于无效操作。
3. JSZip参数不匹配：服务端运行在Node环境下，应直接生成Node Buffer类型的Zip，而非浏览器端的Blob类型。

修复步骤 #

1. 修复服务端组件代码 #

简化Zip生成流程，直接使用Node Buffer类型，避免不必要的转换：

const download = async (file, format: string) => {
    "use server"

    const imageArray = await makeImageArray(file.id, format);
    const zip = new JSZip();

    await Promise.all(imageArray.map(async (rendered) => {
        // 将Blob转为Node Buffer，直接传入JSZip（无需转Base64）
        const buffer = Buffer.from(await rendered.data.arrayBuffer());
        zip.file(`${rendered.name.replaceAll(" ", "_")}.${rendered.type}`, buffer);
    }));

    // 直接生成Node Buffer类型的Zip，跳过Blob转换步骤
    return await zip.generateAsync({ type: "nodebuffer" });
}

2. 修复客户端组件代码 #

确保Blob构造器接收数组形式的Buffer，同时添加URL资源释放逻辑：

const clickAZip = async (file, format) => {
    const a = document.createElement("a");
    const zipBuffer = await onDownload(file, format);
    // 必须将Buffer包裹在数组中传入Blob构造器，保证二进制数据正确
    const zipBlob = new Blob([zipBuffer], { type: 'application/zip' });
    a.href = URL.createObjectURL(zipBlob);
    a.download = `${file.name}.zip`;
    a.click();
    // 手动释放URL资源，避免浏览器内存泄漏
    URL.revokeObjectURL(a.href);
}

3. 验证blobFetch函数的正确性 #

确保blobFetch确实返回有效的Blob对象，检查其实现是否正确处理响应：

// 参考正确的blobFetch实现
const blobFetch = async (url: string, method: string, body?: string) => {
    const response = await fetch(url, {
        method,
        headers: {
            'Content-Type': 'application/json',
            // 复用认证逻辑，确保请求携带正确的授权头
            ...(await getAuthHeaders())
        },
        body
    });
    if (!response.ok) throw new Error(`请求失败: ${response.status}`);
    return await response.blob();
}

错误原因说明 #

• 客户端直接传Buffer给Blob构造器时，会把Buffer的每个字节当成独立元素，生成的Blob内容是字节数组的字符串形式，而非原始二进制数据，导致Zip包损坏。
• 服务端多次编码转换过程中，容易引入二进制数据的编码偏差；同时生成Blob再转回Buffer的操作，完全是冗余步骤，可能在跨环境转换时丢失数据。

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