前端压缩、解压缩之gzip+pako.js

142 阅读 0 评论 94 点赞

我是靠谱客的博主动人唇彩，这篇文章主要介绍前端压缩、解压缩之gzip+pako.js，现在分享给大家，希望可以做个参考。

ws推送或这接口返回的数据经过gzip压缩能减少大量的传输数据，减少传输数据消耗

但是需要在收到数据之后解压。

前端解压就可以用到pako了

下载与引入pako
下载：npm install pako

引入：import pako from “pako”

定义解压和压缩的方法

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import pako from "pako";
Vue.prototype.$zip = function (str){
var binaryString = pako.gzip(encodeURIComponent(str), { to: 'string' })
return btoa(binaryString);
}
Vue.prototype.$unzip = function (b64Data) {
var strData = atob(b64Data);
// 将二进制字符串转换为字符数数组
var charData = strData.split("").map(function (x) {
return x.charCodeAt(0);
});
// 把数字数组转换成字节数组
var binData = new Uint8Array(charData);
// 解压
var data = pako.inflate(binData);
//将解压缩完成的的byteArray转换回ascii字符串:
var strData = new TextDecoder("utf-8").decode(data);//大数据使用此方法
//var strData
= String.fromCharCode.apply(null, new Uint16Array(data));//数据不是很多可以使用此方法
return decodeURIComponent(strData);
};

方法调用：
压缩：this.$zip(“需要压缩的内容”)

解压缩：this.$zip(“需要解压缩的内容”)
注意事项：
1、pako解决中文乱码：

压缩前：

pako.gzip(encodeURIComponent(str), { to: ‘string’ })

解压完成后：

return decodeURIComponent(strData)

2、大数据解压

将解压缩完成的的byteArray转换回ascii字符串，推荐使用new TextDecoder(“utf-8”).decode(data)

也可以封装

复制代码

export function zipJson (str) {
var binaryString = pako.gzip(encodeURIComponent(str), { to: 'string' })
return btoa(binaryString)
}
export function unzipJson (b64Data) {
var strData = atob(b64Data)
// Convert binary string to character-number array
var charData = strData.split('').map(function (x) { return x.charCodeAt(0) })
// Turn number array into byte-array
var binData = new Uint8Array(charData)
// // unzip
var data = pako.inflate(binData)
// Convert gunzipped byteArray back to ascii string:
// strData
= String.fromCharCode.apply(null, new Uint16Array(data));
var array = new Uint16Array(data)
var res = ''
var chunk = 8 * 1024
var i
for (i = 0; i < array.length / chunk; i++) {
res += String.fromCharCode.apply(null, array.slice(i * chunk, (i + 1) * chunk))
}
res += String.fromCharCode.apply(null, array.slice(i * chunk))
strData = res
return decodeURIComponent(strData)
}
import {isAuth, treeDataTranslate, transOrg, transUser, transDict, datePattern, zipJson, unzipJson} from '@/utils'
// 挂载全局
Vue.prototype.zipJson = zipJson
Vue.prototype.unzipJson = unzipJson

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
export function zipJson (str) {
var binaryString = pako.gzip(encodeURIComponent(str), { to: 'string' })
return btoa(binaryString)
}
export function unzipJson (b64Data) {
var strData = atob(b64Data)
// Convert binary string to character-number array
var charData = strData.split('').map(function (x) { return x.charCodeAt(0) })
// Turn number array into byte-array
var binData = new Uint8Array(charData)
// // unzip
var data = pako.inflate(binData)
// Convert gunzipped byteArray back to ascii string:
// strData
= String.fromCharCode.apply(null, new Uint16Array(data));
var array = new Uint16Array(data)
var res = ''
var chunk = 8 * 1024
var i
for (i = 0; i < array.length / chunk; i++) {
res += String.fromCharCode.apply(null, array.slice(i * chunk, (i + 1) * chunk))
}
res += String.fromCharCode.apply(null, array.slice(i * chunk))
strData = res
return decodeURIComponent(strData)
}
import {isAuth, treeDataTranslate, transOrg, transUser, transDict, datePattern, zipJson, unzipJson} from '@/utils'
// 挂载全局
Vue.prototype.zipJson = zipJson
Vue.prototype.unzipJson = unzipJson