当前位置:首页 > JavaScript

js实现gzip

2026-03-14 08:08:45JavaScript

使用 pako 库实现 Gzip 压缩与解压

pako 是一个流行的 JavaScript 库,提供高效的 zlib 压缩和解压功能,支持 Gzip 格式。

安装 pako:

npm install pako
# 或直接通过 CDN 引入
<script src="https://cdnjs.cloudflare.com/ajax/libs/pako/2.1.0/pako.min.js"></script>

压缩字符串示例:

const pako = require('pako');
const originalString = "This is a string to be compressed";
const compressed = pako.gzip(originalString);
// 转换为 Base64 便于传输
const compressedBase64 = btoa(String.fromCharCode.apply(null, compressed));

解压字符串示例:

const decompressed = pako.ungzip(
  Uint8Array.from(
    atob(compressedBase64)
      .split('')
      .map(c => c.charCodeAt(0))
  )
);
const result = new TextDecoder().decode(decompressed);

使用浏览器内置 Compression Streams API

现代浏览器支持 Compression Streams API,无需第三方库:

压缩示例:

async function compressGzip(input) {
  const stream = new Blob([input]).stream();
  const compressedStream = stream.pipeThrough(new CompressionStream('gzip'));
  return await new Response(compressedStream).blob();
}

解压示例:

async function decompressGzip(input) {
  const stream = new Blob([input]).stream();
  const decompressedStream = stream.pipeThrough(new DecompressionStream('gzip'));
  return await new Response(decompressedStream).text();
}

Node.js 内置 zlib 模块

Node.js 环境可直接使用内置模块:

js实现gzip

const zlib = require('zlib');
const fs = require('fs');

// 压缩文件
fs.createReadStream('input.txt')
  .pipe(zlib.createGzip())
  .pipe(fs.createWriteStream('input.txt.gz'));

// 解压文件
fs.createReadStream('input.txt.gz')
  .pipe(zlib.createGunzip())
  .pipe(fs.createWriteStream('output.txt'));

注意事项

  • 浏览器端 Gzip 压缩主要适用于文本数据,二进制数据可能需要特殊处理
  • 大文件建议使用流式处理避免内存问题
  • 跨浏览器兼容性需要考虑,老版本浏览器可能需要 polyfill
  • 服务端设置正确的 Content-Encoding 响应头

以上方法根据不同运行环境提供了 JavaScript 实现 Gzip 压缩/解压的解决方案,选择时需考虑目标平台支持情况。

标签: jsgzip
分享给朋友:

相关文章

js实现动画

js实现动画

使用 CSS 动画与 JavaScript 控制 通过 JavaScript 动态添加或移除 CSS 类来触发动画。CSS 定义关键帧(@keyframes),JavaScript 通过 classL…

js实现复制

js实现复制

使用document.execCommand方法 在较旧的浏览器中,可以使用document.execCommand('copy')实现复制功能。创建一个临时的textarea或input元素,将需要…

js实现游标

js实现游标

使用JavaScript实现游标 在JavaScript中,可以通过操作DOM元素的cursor样式属性来实现自定义游标效果。以下是几种常见的实现方法: 修改默认鼠标指针样式 通过CSS的curso…

js图片轮播的实现

js图片轮播的实现

基础图片轮播实现 使用HTML、CSS和JavaScript实现一个简单的图片轮播效果。HTML部分定义轮播容器和图片,CSS负责样式和过渡效果,JavaScript处理逻辑。 <div cl…

js实现滑动

js实现滑动

实现滑动效果的方法 在JavaScript中实现滑动效果可以通过多种方式完成,以下是几种常见的实现方法: 使用CSS过渡和JavaScript触发 通过CSS定义过渡效果,JavaScript控制触…

js实现上传图片

js实现上传图片

使用HTML5的File API实现图片上传 HTML5的File API允许通过JavaScript访问用户选择的文件。需要创建一个文件输入元素,并监听其change事件。 <input t…