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

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

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

前端解压就可以用到pako了

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

引入：import pako from “pako”

定义解压和压缩的方法

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