前端项目vue3/React使用pako库解压缩后端返回gzip数据

pako仓库地址：https://github.com/nodeca/pako

文档地址：pako 2.1.0 API documentation

外部接口返回一个直播消息或者图片数据是经过zip压缩的，前端需要把这个数据解压缩之后才可以使用，这样可以大大降低网络数据传输的内容，让数据发送和接收都变的很快，这里就需要使用前端也有解压缩的能力，就可以使用pako这个依赖库。

pako 介绍

pako 是一个流行的 JavaScript 库，用于在浏览器中进行数据压缩和解压缩操作。它提供了对常见的压缩算法（如 Deflate 和 Gzip）的实现，使开发者能够在客户端上轻松进行数据压缩和解压缩，以减少数据传输大小和网络带宽消耗。

一些特点和功能

支持多种压缩算法：pako 实现了 Deflate 和 Gzip 等常见压缩算法的压缩和解压缩功能。这些算法在网络传输中被广泛使用，能够显著减小数据的大小。

跨平台兼容性：pako 可以在多个平台和环境中使用，包括浏览器、Node.js 和 Web Workers 等。

简单易用的 API：pako 提供了简单的 API，使得压缩和解压缩操作变得简单和直观。你可以通过提供原始数据和选项来执行压缩和解压缩，并获得压缩后的数据或原始数据。

高性能：pako 的实现经过优化，具有较高的性能。它使用原生的 JavaScript 数组和类型化数组操作来处理数据，以提高压缩和解压缩的速度和效率。

简单示例

// 压缩数据
const dataToCompress = "Hello, world!";
const compressedData = pako.deflate(dataToCompress);// 解压缩数据
const decompressedData = pako.inflate(compressedData);
const originalData = pako.inflateRaw(compressedData);// 将压缩数据转换为 Base64 字符串
const compressedBase64 = btoa(String.fromCharCode.apply(null, compressedData));

前端实战示例

1.安装后引入库

安装:

npm install pako

引用

import pako from 'pako'

自定义业务逻辑

<template><div><p>解压后的内容：{{ uncompressedData }}</p></div>
</template><script>
import pako from 'pako';export default {data() {return {compressedData: '', // 假设这是从服务器接收到的Gzip压缩过的字符串uncompressedData: ''};},created() {// 假设这里从服务器获取Gzip压缩过的数据this.compressedData = '...'; // 服务器发送过来的Gzip压缩数据this.uncompressedData = pako.ungzip(this.compressedData, { to: 'string' });}
};
</script>

在这个例子中，我们假设compressedData是从服务器接收到的Gzip压缩过的字符串。在Vue的created生命周期钩子中，我们使用pako的ungzip函数将其解压，并将结果以字符串形式赋值给uncompressedData。在模板中，我们展示了解压后的数据。