Vue前端用pako压缩文件出现乱码

Question

在Vue前端项目中使用Pako进行文件压缩时，若未正确处理文本编码，常导致中文字符乱码。典型问题是将字符串直接传入Pako压缩，而未先通过`TextEncoder`转换为UTF-8格式的Uint8Array。浏览器默认将字符串视为UTF-16，压缩后数据损坏，解压时无法还原中文内容。正确做法是压缩前使用`new TextEncoder().encode(str)`，解压后用`new TextDecoder().decode()`还原，确保编码一致性。

Answer 1

一、问题背景与现象分析

在Vue前端项目中，使用Pako进行文本或文件内容的压缩已成为优化传输效率的常见手段。然而，许多开发者在处理包含中文字符的字符串时，常遇到解压后出现乱码的问题。该问题的核心在于：JavaScript中的字符串默认以UTF-16编码存储，而Pako操作的是二进制数据（Uint8Array），若未正确进行编码转换，会导致压缩/解压过程中信息丢失。

典型错误代码如下：

// ❌ 错误做法：直接将字符串传入pako
const compressed = pako.gzip('这是一段中文文本');
const decompressed = pako.gunzip(compressed, { to: 'string' });
console.log(decompressed); // 输出乱码
    

上述代码看似简洁，但因忽略了底层编码机制，最终导致不可逆的数据损坏。

二、编码基础与浏览器行为解析

• UTF-16：JavaScript引擎内部使用UTF-16表示字符串，每个字符通常占2字节（部分补充字符占4字节）。
• UTF-8：Web标准推荐的编码格式，对ASCII兼容性好，中文一般占用3字节。
• Pako输入要求：期望接收Uint8Array类型数据，即原始字节流。

当直接将UTF-16字符串传递给Pako时，库无法识别其编码来源，会将其按某种默认方式解释为字节数组，造成语义错乱。

三、解决方案演进路径

阶段	方法	是否解决乱码	适用场景
1. 原始字符串传入	pako.gzip(str)	❌	仅英文小文本
2. 使用TextEncoder	new TextEncoder().encode(str)	✅	现代浏览器环境
3. 兼容IE的polyfill方案	手动实现UTF-8编码函数	✅（需额外逻辑）	老旧系统迁移

四、正确实现流程图

graph TD
    A[原始字符串 str] --> B{是否含非ASCII字符?}
    B -- 否 --> C[可直接gzip]
    B -- 是 --> D[使用TextEncoder.encode(str)]
    D --> E[pako.gzip(Uint8Array)]
    E --> F[传输/存储]
    F --> G[pako.gunzip(压缩数据)]
    G --> H[使用TextDecoder.decode()]
    H --> I[还原为原始字符串]
    

五、Vue项目中的完整实践示例

在Vue组件或工具类中，应封装健壮的压缩解压函数：

import pako from 'pako';

export function compressString(str: string): Uint8Array {
  const encoder = new TextEncoder();
  const data = encoder.encode(str);
  return pako.gzip(data);
}

export function decompressString(compressedData: Uint8Array): string {
  const decompressedData = pako.gunzip(compressedData);
  const decoder = new TextDecoder('utf-8');
  return decoder.decode(decompressedData);
}

// 在Vue组件中使用
export default {
  methods: {
    async handleCompression() {
      const text = '这是需要压缩的中文内容';
      const compressed = compressString(text);
      console.log('压缩后大小:', compressed.length);

      const restored = decompressString(compressed);
      console.log('解压结果:', restored); // 正确输出原文
    }
  }
}
    

六、边界情况与调试建议

1. 检查TextDecoder构造参数是否明确指定'utf-8'，避免默认编码差异。
2. 对于Base64传输场景，应在压缩后调用btoa(String.fromCharCode(...))转换为可读字符串。
3. 大文本压缩时注意内存占用，建议分块处理或启用Worker线程。
4. 服务端若也使用Pako或zlib，需确保两端编码一致性。
5. 测试用例应覆盖纯中文、混合中英文、特殊符号（如 emoji）等场景。
6. 利用Chrome DevTools的Memory面板观察Uint8Array实际内容，辅助排查编码错误。
7. 考虑引入jszip等更高层库时，仍需关注其内部是否已处理编码问题。
8. 在SSR或Node.js环境中运行时，确认全局是否存在TextEncoder/Decoder支持。
9. 使用TypeScript可提升类型安全性，防止意外传入非Uint8Array类型。
10. 建立通用工具模块，统一管理压缩逻辑，减少重复错误。