前端项目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。在模板中,我们展示了解压后的数据。 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/747118.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Android Studio中HAXM安装失败的解决方案(HAXM installation failed)

文章目录 错误示例Hyper-VWindows SandboxWindows Hypervisor Platform&#xff08;Windows 虚拟化监控程序平台&#xff09; 出现原因解决方法虚拟机平台方案一方案二方案三 错误示例 表明HAXM (Hardware Accelerated Execution Manager)安装失败了。HAXM是一个硬件辅助虚拟化…

C++基础编程100题-015 OpenJudge-1.3-13 反向输出一个三位数

更多资源请关注纽扣编程微信公众号 http://noi.openjudge.cn/ch0103/13/ 描述 将一个三位数反向输出。 输入 一个三位数n。 输出 反向输出n。 样例输入 100样例输出 001参考程序 #include<bits/stdc.h> using namespace std;int main(){int n;cin>>n;cou…

【TB作品】MSP430G2553,单片机,口袋板, 烘箱温度控制器

题3 烘箱温度控制器 设计一个基于MSP430的温度控制器&#xff0c;满足如下技术指标&#xff1a; &#xff08;1&#xff09;1KW 电炉加热&#xff0c;最度温度为110℃ &#xff08;2&#xff09;恒温箱温度可设定&#xff0c;温度控制误差≦2℃ &#xff08;3&#xff09;实时显…

基于Langchain-chatchat搭建本地智能知识问答系统

基于Langchain-chatchat搭建本地智能 搭建本地智能知识问答系统&#xff1a;基于Langchain-chatchat的实践指南引言项目概述环境安装Anacondapip 项目安装步骤大语言模型&#xff08;LLM&#xff09;的重要性结语 搭建本地智能知识问答系统&#xff1a;基于Langchain-chatchat的…

记录Gstreamer的uridecodebin可以自动选择硬解码器

记录&#xff1a; uridecodebin3 和uridecodebin优先硬解码 这两个插件&#xff0c;本来是负责动态选择合适的解码器来处理特定的媒体流&#xff0c;使用案例&#xff1a; gst-launch-1.0 uridecodebin urirtsp://192.168.1.120:8554/test ! glimagesink -v gst-launch-1.0 …

汇聚荣做拼多多运营,是新手怎么做?

作为电商领域的一颗新星&#xff0c;拼多多以其独特的商业模式迅速崛起&#xff0c;吸引了众多商家和消费者的目光。对于新手来说&#xff0c;如何在拼多多平台上开展运营活动&#xff0c;成为了许多初入电商领域的人们关心的问题。本文将围绕如何做好拼多多运营这一核心内容&a…

【ARM】MDK工程切换高版本的编译器后出现error A1137E报错

【更多软件使用问题请点击亿道电子官方网站】 1、 文档目标 解决工程从Compiler 5切换到Compiler 6进行编译时出现一些非语法问题上的报错。 2、 问题场景 对于一些使用Compiler 5进行编译的工程&#xff0c;要切换到Compiler 6进行编译的时候&#xff0c;原本无任何报错警告…

部署企业级AI知识库最重要的是什么?✍

随着人工智能技术的迅猛发展&#xff0c;企业级AI知识库成为提升企业管理效率和信息获取能力的重要工具。那么&#xff0c;在部署企业级AI知识库时&#xff0c;最重要的是什么呢&#xff1f;本文将从数据质量、系统可扩展性、用户体验以及智能化这四个关键方面进行详细分析。 …

计算机专业课面试常见问题-计算机网络篇

目录 1. 计算机网络分为哪 5 层&#xff1f; 2. TCP 协议简述&#xff1f; 3. TCP 和 UDP 的区别&#xff1f;->不同的应用场景&#xff1f; 4. 从浏览器输入网址到显示页…

Ant Design Vue Upload 自定义上传 customRequest,这一篇很详细

Upload 常用属性和方法 示例上传接口 # 接口文档 url https://www.mocky.io/api/main/upload 头部 x-token: xxx 参数 file: File // 上传的文件 flag: xxx // 上传的标识// 文件上传 api 函数简单封装 export const uploadApi ({ file }) > {const formData new Fo…

Java中Collection的成员及其特点

Collection集合 list集合系列 ArrarList集合 底层基于数组来实现 查询速度快&#xff08;根据索引查询数据&#xff09; 删除效率低&#xff08;可能需要把后面很多的数据往后移&#xff09; 添加效率…

CesiumJS【Basic】- #016 多边形面渲染“花了”的问题

文章目录 多边形面渲染“花了”的问题1 目标2 问题代码3 修正后代码4 总结多边形面渲染“花了”的问题 1 目标 解决多边形的面“花了”的问题 2 问题代码 使用Cesium.PerInstanceColorAppearance渲染后出现色斑 import * as Cesium from "cesium";const viewer …

文化财经wh6boll带macd多空转折点提示指标公式源码

文化财经wh6boll带macd多空转折点提示指标公式源码&#xff1a; DIFF:EMA(CLOSE,12) - EMA(CLOSE,26); DEA:EMA(DIFF,9); MACD:2*(DIFF-DEA); MID:MA(CLOSE,26);//求N个周期的收盘价均线&#xff0c;称为布林通道中轨 TMP2:STD(CLOSE,26);//求M个周期内的收盘价的标准差 …

惊天大瓜姬圈天莱女明星出轨风波

#惊天大瓜&#xff01;姬圈天菜女明星出轨风波#近日&#xff0c;娱乐圈掀起了一场前所未有的风暴&#xff01;狗仔队放出重磅消息&#xff0c;直指某位姬圈天菜级别的女明星深陷出轨泥潭。消息一出&#xff0c;引发了网友们的热议和猜测&#xff0c;究竟这位神秘的女明星是谁&a…

第N8周:seq2seq翻译实战-Pytorch复现

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制 一、前期准备 from __future__ import unicode_literals, print_function, division from io import open import unicodedata import s…

DataGrip 2024 po for Mac 数据库管理工具解

Mac分享吧 文章目录 效果一、下载软件二、开始安装1、双击运行软件&#xff08;适合自己的M芯片版或Intel芯片版&#xff09;&#xff0c;将其从左侧拖入右侧文件夹中&#xff0c;等待安装完毕2、应用程序显示软件图标&#xff0c;表示安装成功3、打开访达&#xff0c;点击【文…

怎么实现微信支付?

微信小程序中微信支付&#xff08;前端流程&#xff09; 微信支付前准备工作 微信公众平台绑定商户号 微信支付平台配置好后端信息支付前要有用户的openid 1. 客户端点击支付按钮 在用户点击支付按钮时&#xff0c;触发支付流程。 // 绑定支付按钮点击事件 function onPayB…

前端 CSS 经典:图层放大的 hover 效果

效果 思路 设置 3 层元素&#xff0c;最上层元素使用 clip-path 裁剪成圆&#xff0c;hover 改变圆大小&#xff0c;添加过渡效果。 实现代码 <!DOCTYPE html> <html lang"en"><head><meta charset"utf-8" /><meta http-eq…

基于matlab的K-means聚类图像分割

1 原理 K-means聚类算法在图像分割中的应用是基于一种无监督的学习方法&#xff0c;它将图像中的像素点或特征区域划分为K个不同的簇或类别。以下是K-means聚类算法用于图像分割的原理&#xff0c;包括步骤和公式&#xff1a; 1.1 原理概述 选择簇的数量(K)&#xff1a; 首先…

Android 多媒体开发——Media3与MediaSession最全使用指南

一、Media3库简介 1.1 Media3是什么&#xff1f; 官方释义&#xff1a; Jetpack Media3 is the new home for media libraries that enables Android apps to display rich audio and visual experiences. Media3 offers a simple architecture with powerful customization,…