HTML5 实现获取 gzip 压缩数据，并进行解压，同时解决汉字乱码，相关 pako.js-优快云博客

本文介绍如何使用XMLHttpRequest2.0获取GZIP格式的数据流，并通过pako.js进行解压缩处理，实现网络请求中对GZIP压缩数据的有效解析。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1, 下载 pako.js => http://nodeca.github.io/pako/#Deflate.prototype.onData

2, 首先需要了解一下 XMLHttpRequest 2.0 => https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest

3, 已 GET 请求为例, 红色注释部分为关键步骤

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>网络请求获取 GZIP 格式的数据流, 并解析</title>
    <script src="../commom/pako.min.js"></script>
</head>
<body>
    <div id="box" style="font-size: 30px"></div>
</body>
<script type="text/javascript">
    var Ajax = (function () {
        var Utf8ArrayToStr = function(array) { // 数据流转化为字符串, 兼容汉字
            var out = "", i = 0, len = array.length, char1, char2, char3, char4;
            while(i < len) {
                char1 = array[i++];
                // 当单个字节时, 最大值 '01111111', 最小值 '00000000' 右移四位 07, 00
                // 当两个字节时, 最大值 '11011111', 最小值 '11000000' 右移四位 13, 12
                // 当三个字节时, 最大值 '11101111', 最小值 '11100000' 右移四位 14, 14
                if (char1 >> 4 <= 7) {
                    out += String.fromCharCode(char1);
                } else if (char1 >> 4 == 12 || char1 >> 4 == 13) {
                    char2 = array[i++];
                    out += String.fromCharCode(((char1 & 0x1F) << 6) | (char2 & 0x3F));
                } else if (char1 >> 4 == 14) {
                    char2 = array[i++];
                    char3 = array[i++];
                    char4 = ((char1 & 0x0F) << 12) | ((char2 & 0x3F) << 6);
                    out += String.fromCharCode(char4 | ((char3 & 0x3F) << 0));
                }
            }
            return out;
        };
        return function (url, json, fn) { // 返回一个网络请求方法
            var ajax = new XMLHttpRequest(); // 实例化一个 网络请求
            url += "?";
            for(key in json) {
                url += key + "=" + json[key] + "&";
            }
            url = url.substr(0, url.length - 1);
            ajax.open("get", url, true);     // 开启一个网络请求
            ajax.responseType = "arraybuffer"; // 声明返回的是二进制数据流
            ajax.onload = function () {
                if(ajax.response) {
                    var byteArray = new Uint8Array(ajax.response); // 切换数据编码为
                    byteArray = pako.ungzip(byteArray); // 调用 pako 的方法解压数据
                    fn(Utf8ArrayToStr(byteArray));
                } else {
                    fn("没有获取到任何数据");
                }
            };
            ajax.send(null); // 发起请求
        }
    })();

    Ajax("../files/gzip.gz", {}, function (ret) {
        console.log(ret + "1")
    });
    Ajax("../files/gzips.gz", {}, function (ret) {
        console.log(ret + "2")
    });
</script>
</html>