使用Fetch API与Pako.js客户端解压GZIP CSV文件遇未知压缩方法错误

问题背景 #

我想用客户端代码，通过Fetch API和Pako.js加载并解压大型GZIP压缩CSV文件，编写的代码如下：

const res = await fetch('www.example.com/large.csv.gzip');
let raw = await res.text();
raw = pako.inflate(raw);
console.log(raw);

运行后抛出无堆栈跟踪的错误：

Uncaught (in promise) unknown compression method

我查找过相关示例，但均未覆盖CSV文件+Fetch API的场景，包括：

• 使用Axios请求的示例
• 压缩JSON文件的示例
• 使用WASM-Gzip的示例
• 使用Base64字符串的示例

环境信息：

• Firefox 108.0.2（64位）
• Pako.js 2.1.0

问题原因 #

错误的核心是将二进制GZIP数据当作文本解析：res.text()会把原始二进制数据转换为UTF-8字符串，这个过程会破坏GZIP的字节结构，导致Pako无法识别压缩格式，从而抛出"未知压缩方法"的错误。

解决方案 #

修正代码，保留原始二进制数据并正确传递给Pako：

const res = await fetch('www.example.com/large.csv.gzip');
// 获取原始二进制缓冲区
const buffer = await res.arrayBuffer();
// 转换为Pako支持的Uint8Array格式
const uint8Array = new Uint8Array(buffer);
// 解压并直接转为字符串（对应CSV文本）
const decompressedCsv = pako.inflate(uint8Array, { to: 'string' });
console.log(decompressedCsv);

额外注意事项 #

• 建议服务器返回时设置Content-Encoding: gzip响应头，符合HTTP规范
• 若处理超大型文件，一次性加载解压可能占用过多内存，可结合Pako的增量解压API实现流式处理（逐步读取并解压数据块）

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