let zlib = require("pako"); //引入
//压缩方法 用来将大数据压缩后在传给后端
Vue.prototype.zip = function (str) {
//encodeURIComponent 将字符串作为URI组件进行编码
//zlib.gzip() 将编码后的数据进行压缩，string类型
let binaryString = zlib.gzip(encodeURIComponent(str), {
to: "string"
});
//btoa()将压缩后的数据变成base64格式
return btoa(binaryString);
},
//解压缩方法，前端接受后端大数据后，先解压缩在进行后面的逻辑
Vue.prototype.unzip = function (b64Data) {
//atob()将base64格式数据转化成压缩数据
let strData = atob(b64Data);
//split()方法用于把一个字符串分割成字符串数组
//通过map函数进行遍历，并对每一个进行 Unicode 编码
let charData = strData.split("").map(function (x) {
//charCodeAt() 方法可返回指定位置的字符的 Unicode 编码
return x.charCodeAt(0);
});
//Uint8Array 8 位无符号整数值的类型化数组
let binData = new Uint8Array(charData);
// console.log(binData);
//解压缩 充气
let data = zlib.inflate(binData);
//fromCharCode 将 Unicode 编码转为一个字符:
// console.log(data);
//分片解压缩，防止数据量过大，浏览器栈溢出报错
let chunk = 8 * 1024;
let res = "";
let dataLength = data.length / chunk;
let i;
for (i = 0; i < dataLength; i++) {
res += String.fromCharCode.apply(
null,
data.slice(i * chunk, (i + 1) * chunk)
);
}
res += String.fromCharCode.apply(null, data.slice(i * chunk));
//decodeURIComponent() 对 encodeURIComponent() 函数编码的 URI 进行解码
strData = res;
return decodeURIComponent(strData);
},
2021-02-20：
问题更新：最新客户在使用的过程中，发现页面展示会出现莫名其妙的“+”。
对此，我们进行了一番查询，发现问题原因如下：后端在将数据压缩的过程中，正常情况下会将数据中的“+”号编码成%2B，同时会将“ 空格 ”编码成“%20”，那么前端接收以后，就可以进行解码。
但是，我们发现数据中的“+”会被正常编码，但是空格却不会，而是编码成了“+”.那么，前端接收以后在解码的过程中，就无法对“+”进行解码，就会造成显示和真实数据不一致。
解决方案：后端在压缩完成后，再将所有的“+”编码替换成“%20”，这样，在前端接收数据后，就能将数据正常解码并显示。
