如何基于浏览器端JSZip编程重建仅记录单个文件的Zip中央目录？

核心思路 #

Zip文件的结构是本地文件头 → 文件数据 → [数据描述符] → 中央目录 → 结束记录。当中央目录损坏时，WinRAR的修复逻辑是直接扫描整个文件，定位所有本地文件头（固定签名0x04034b50），再根据这些头的信息重建中央目录。我们要在浏览器端实现同样逻辑：跳过失效的中央目录，手动遍历二进制数据提取所有文件信息，再导入JSZip。

实现步骤 #

1. 读取Zip文件为ArrayBuffer #

通过FileReader将用户上传的Zip文件读取为ArrayBuffer，方便操作二进制数据：

const fileInput = document.getElementById('zip-file-input');
fileInput.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  const arrayBuffer = await file.arrayBuffer();
  const fixedZip = await fixCorruptedZip(arrayBuffer);
  
  // 下载修复后的Zip文件
  const content = await fixedZip.generateAsync({type: 'blob'});
  const url = URL.createObjectURL(content);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'fixed.zip';
  a.click();
  URL.revokeObjectURL(url);
});

2. 手动扫描并解析所有本地文件头 #

编写fixCorruptedZip函数，遍历二进制数据，逐个识别并解析本地文件头：

async function fixCorruptedZip(arrayBuffer) {
  const zip = new JSZip();
  const view = new DataView(arrayBuffer);
  let offset = 0;
  const localHeaderSignature = 0x04034b50;

  while (offset < arrayBuffer.byteLength - 4) {
    // 检查当前位置是否为本地文件头签名
    const signature = view.getUint32(offset, true); // true表示小端序，Zip格式通用
    if (signature !== localHeaderSignature) {
      offset++;
      continue;
    }

    // 解析本地文件头字段
    const compressionMethod = view.getUint16(offset + 8, true);
    const crc32 = view.getUint32(offset + 14, true);
    const compressedSize = view.getUint32(offset + 18, true);
    const uncompressedSize = view.getUint32(offset + 22, true);
    const fileNameLength = view.getUint16(offset + 26, true);
    const extraFieldLength = view.getUint16(offset + 28, true);
    const generalPurposeBitFlag = view.getUint16(offset + 6, true);

    // 读取文件名
    const fileNameBytes = new Uint8Array(arrayBuffer, offset + 30, fileNameLength);
    const fileName = new TextDecoder('utf-8').decode(fileNameBytes);

    // 跳过额外字段，定位到文件数据起始位置
    offset += 30 + fileNameLength + extraFieldLength;

    // 读取文件数据
    const fileData = new Uint8Array(arrayBuffer, offset, compressedSize);
    offset += compressedSize;

    // 处理数据描述符（如果通用位标志第3位为1，说明本地头的CRC/大小字段无效）
    if ((generalPurposeBitFlag & 0x08) !== 0) {
      const descSignature = view.getUint32(offset, true);
      if (descSignature === 0x08074b50) {
        // 可选：用数据描述符里的真实值覆盖本地头的字段
        // const actualCrc32 = view.getUint32(offset + 4, true);
        offset += 16; // 数据描述符固定16字节长度
      }
    }

    // 将文件添加到JSZip实例
    await zip.file(fileName, fileData, {
      compression: compressionMethod === 0 ? 'STORE' : 'DEFLATE',
      crc32: crc32,
      dir: fileName.endsWith('/') // 判断是否为目录
    });
  }

  return zip;
}

关键细节说明 #

• 字节序处理：Zip格式所有多字节字段均采用小端序，因此DataView读取时第二个参数需传true。
• 数据描述符：若通用位标志第3位被设置，说明本地文件头中的CRC、大小字段为占位值，实际值在文件数据后的数据描述符中，需额外跳过该段数据。
• 目录识别：文件名以/结尾时，标记为目录，JSZip需设置dir: true。
• 压缩方式：compressionMethod为0表示未压缩（STORE），8表示DEFLATE压缩，这是最常见的两种类型。

注意事项 #

• 该实现仅覆盖常规Zip场景，不支持加密文件、分卷Zip等特殊格式，如需兼容需扩展逻辑。
• 测试时优先使用WinRAR可修复的文件验证，确保解析逻辑正确。

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