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

news2024/10/7 6:47:53

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.coloradmin.cn/o/1866218.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

茴香豆接入微信个人助手部署

将rag产品接入微信工作群&#xff0c;自动回答问题&#xff0c;香吗&#xff1f;&#xff1f; let‘s go 1、打开openxlab平台&#xff0c;找到茴香豆web产品应用中心-OpenXLab 点击进入&#xff0c;设置知识库名字和密码 2、上传知识库文件和编辑正反例等 3、然后进行测试问答…

Gitlab合并代码并解决冲突演示

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

南信大尹志聪教授为一作在顶级综合性期刊《Natl. Sci. Rev.》发文:传统梅雨停摆,江南缘何不再多烟雨?

文章简介 论文名称&#xff1a;Traditional Meiyu–Baiu has been suspended by global warming 第一作者及单位&#xff1a;尹志聪(教授|南京信息工程大学大气科学学院) 通讯作者及单位&#xff1a;王会军&#xff08;院士|南京信息工程大学大气科学学院&#xff09; 文章发…

尚品汇-(七)

&#xff08;1&#xff09;在网关中实现跨域 全局配置类实现 包名&#xff1a;com.atguigu.gmall.gateway.config 创建CorsConfig类 Configuration public class CorsConfig {Beanpublic CorsWebFilter corsWebFilter(){// cors跨域配置对象CorsConfiguration configuration…

使用单调队列求滑动窗口最大值

单调队列&#xff1a;队列元素之间的关系具有单调性&#xff08;从队首到队尾单调递增/递减&#xff09;&#xff0c;队首与队尾进行插入与删除操作&#xff0c;使队列保持单调递增/递减&#xff0c;由双端队列deque实现。 通过例题对单调队列进行分析掌握&#xff1a; 使用单…

【UE5.3】笔记4-自定义材质蓝图

正常来说&#xff0c;我们都是拿到什么材质用什么材质&#xff0c;那么我们如何去创建自定义的材质呢&#xff1f; 首先&#xff0c;创建MyMaterials文件夹用来存放我们自制的材质&#xff1b; 然后&#xff0c;右键创建一个材质&#xff0c;起个名字&#xff0c;双击打开&am…

操作符详解(上) (C语言)

操作符详解&#xff08;上&#xff09; 一. 进制转换1. 二进制2. 二进制的转换 二. 原码 补码 反码三. 操作符的分类四. 结构成员访问操作符1. 结构体的声明2. 结构体成员访问操作符 一. 进制转换 1. 二进制 在学习操作符之前&#xff0c;我们先了解一些2进制、8进制、10进制…

SK Hynix 3D DRAM良率突破56.1%,开启存储新时代

根据韩国财经媒体Business Korea独家报道&#xff1a;在刚刚结束的VLSI 2024国际研讨会上&#xff0c;韩国半导体巨头SK Hynix公布了一项振奋人心的进展&#xff1a;其五层堆叠3D DRAM的制造良率已达到56.1%。此成果标志着3D DRAM技术在商业化道路上迈出了坚实的一步&#xff0…

Python+Pytest+Yaml+Request+Allure+GitLab+Jenkins接口自动化测试框架概解

PythonPytestYamlAllure整体框架目录&#xff08;源代码请等下篇&#xff09; 框架详解 common:公共方法包 –get_path.py:获取文件路径方法 –logger_util.py:输出日志方法 –parameters_until.py&#xff1a;传参方式方法封装 –requests_util.py&#xff1a;请求方式方法封…

从零开始学docker(四)-安装mysql及主从配置(一)

mysql MySQL是一个关系型数据库管理系统&#xff0c;由瑞典MySQL AB 公司开发&#xff0c;属于 Oracle 旗下产品。MySQL 是最流行的关系型数据库管理系统之一&#xff0c;在 WEB 应用方面&#xff0c;MySQL是最好的 RDBMS (Relational Database Management System&#xff0c;关…

基于 elementUI / elementUI plus,实现 主要色(主题色)的一件换色(换肤)

一、效果图 二、方法 改变elementUI 的主要色 --el-color-primary 为自己选择的颜色&#xff0c;核心代码如下&#xff1a; // 处理主题样式 export function handleThemeStyle(theme) {document.documentElement.style.setProperty(--el-color-primary, theme) } 三、全部代…

通用后台管理系统(一)——项目介绍

目录 二、文档结构 src文件夹&#xff1a; 三、技术和插件 1、Vue router 2、element-ui框架 3、样式插件less 4、vuex状态管理 5、axios.js 6、mock.js模拟数据 7、echarts图表工具 四、项目效果展示 总结 一、项目介绍 通用后台管理是采用vue2cli开发的项目&#…

CMN-700(1)CMN-700概述

本章介绍CMN-700&#xff0c;这是用于AMBA5 CHI互连&#xff0c;且可根据需要定制的网格拓扑结构。 1. 关于CMN‐700 CMN‐700是一种可配置扩展的一致性互连网络&#xff0c;旨在满足高端网络和企业计算应用中使用的一致性网络系统的功率、性能和面积(PPA)要求。支持1-256个处…

SQL Server 触发器

触发器是一种存储数据库过程&#xff0c;当数据库中发生特定事件&#xff08;如插入、更新或删除操作&#xff09;时&#xff0c;会自动调用该触发器。审核SQL Server实例的方法有很多&#xff0c;其中一种方法是使用审核触发器&#xff0c;触发器在SQL Server数据库中扮演着关…

七天速通javaSE:第二天 基础:标识符与数据类型

文章目录 前言一、注释与标识符1. 注释2. 标识符2.1 标识符2.2 关键字 二、数据类型1. 语言类型2. 数据类型2.1 基本数据类型2.2引用数据类型 三、类型转换1. 自动转换2. 强制转换&#xff08;不建议&#xff09; 四、代码规范 前言 今天将学习Java语法的基础&#xff0c;认识…

dataguard 主备切换方式switchover 和 failover 操作步骤

作者介绍&#xff1a;老苏&#xff0c;10余年DBA工作运维经验&#xff0c;擅长Oracle、MySQL、PG数据库运维&#xff08;如安装迁移&#xff0c;性能优化、故障应急处理等&#xff09; 公众号&#xff1a;老苏畅谈运维 欢迎关注本人公众号&#xff0c;更多精彩与您分享。datagu…

modelsim做后仿真的一点思路

这是以TD_5.6.3_Release_88061生成的网表文件&#xff08;其他工具生成的网表文件类似&#xff09;&#xff0c;与modelsim联合进行门级仿真的样例&#xff0c;时序仿真与门级仿真的方法类似&#xff0c;只是增加了标准延时文件。 1、建立门级仿真工程 将门级网表和testbench添…

【Linux】线程Thread

&#x1f525;博客主页&#xff1a; 我要成为C领域大神&#x1f3a5;系列专栏&#xff1a;【C核心编程】 【计算机网络】 【Linux编程】 【操作系统】 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 本博客致力于知识分享&#xff0c;与更多的人进行学习交流 ​ ​ 线程概述 …

ROS学习(17):定位和地图绘制(1)

目录 0.前言 1.定位和建图 1.里程计&#xff08;Odometry&#xff09; 2.扫描匹配&#xff08;Scan Matching&#xff09; 3.结尾 0.前言 好久不见各位&#xff0c;前段时间忙着考试&#xff08;6级和一些专业课&#xff09;和摆烂断更了近30天&#xff0c;现在哥们回来更…

【移动应用开发期末复习】第五/六章

系列文章 第一章——Android平台概述 第一章例题 第二章——Android开发环境 第二章例题 第三章 第三章例题 第四章 系列文章界面布局设计线性布局表格布局帧布局相对布局约束布局控制视图界面的其他方法代码控制视图界面数据存储与共享首选项信息数据文件SQLite数据库Content…