?let?zlib?=?require("pako"); //引入
//壓縮方法 用來將大數(shù)據(jù)壓縮后在傳給后端
Vue.prototype.zip?=?function?(str)?{
????????????//encodeURIComponent?將字符串作為URI組件進(jìn)行編碼
????????????//zlib.gzip()?將編碼后的數(shù)據(jù)進(jìn)行壓縮生闲，string類型
????????????let?binaryString?=?zlib.gzip(encodeURIComponent(str),?{
????????????????to:?"string"
????????????});
????????????//btoa()將壓縮后的數(shù)據(jù)變成base64格式
????????????return?btoa(binaryString);
????????},
//解壓縮方法，前端接受后端大數(shù)據(jù)后懒熙，先解壓縮在進(jìn)行后面的邏輯
????????Vue.prototype.unzip?=?function?(b64Data)?{
????????????//atob()將base64格式數(shù)據(jù)轉(zhuǎn)化成壓縮數(shù)據(jù)
????????????let?strData?=?atob(b64Data);
????????????//split()方法用于把一個(gè)字符串分割成字符串?dāng)?shù)組
????????????//通過map函數(shù)進(jìn)行遍歷昼弟，并對每一個(gè)進(jìn)行?Unicode?編碼
????????????let?charData?=?strData.split("").map(function?(x)?{
????????????????//charCodeAt()?方法可返回指定位置的字符的?Unicode?編碼
????????????????return?x.charCodeAt(0);
????????????});
????????????//Uint8Array?8?位無符號(hào)整數(shù)值的類型化數(shù)組
????????????let?binData?=?new?Uint8Array(charData);
????????????//?console.log(binData);
????????????//解壓縮?充氣
????????????let?data?=?zlib.inflate(binData);
????????????//fromCharCode?將?Unicode?編碼轉(zhuǎn)為一個(gè)字符:
????????????//?console.log(data);
?????????? //分片解壓縮还惠，防止數(shù)據(jù)量過大，瀏覽器棧溢出報(bào)錯(cuò)
????????????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()?函數(shù)編碼的?URI?進(jìn)行解碼
????????????strData?=?res;
????????????return?decodeURIComponent(strData);
????????},
2021-02-20：
? ? 問題更新：最新客戶在使用的過程中私杜，發(fā)現(xiàn)頁面展示會(huì)出現(xiàn)莫名其妙的“+”蚕键。
? ? 對此，我們進(jìn)行了一番查詢衰粹，發(fā)現(xiàn)問題原因如下：后端在將數(shù)據(jù)壓縮的過程中锣光，正常情況下會(huì)將數(shù)據(jù)中的“+”號(hào)編碼成%2B，同時(shí)會(huì)將“ 空格 ”編碼成“%20”铝耻，那么前端接收以后誊爹，就可以進(jìn)行解碼。
? ? 但是瓢捉，我們發(fā)現(xiàn)數(shù)據(jù)中的“+”會(huì)被正常編碼频丘，但是空格卻不會(huì)，而是編碼成了“+”.那么泡态，前端接收以后在解碼的過程中搂漠，就無法對“+”進(jìn)行解碼，就會(huì)造成顯示和真實(shí)數(shù)據(jù)不一致某弦。
解決方案：后端在壓縮完成后桐汤，再將所有的“+”編碼替換成“%20”，這樣靶壮，在前端接收數(shù)據(jù)后怔毛，就能將數(shù)據(jù)正常解碼并顯示。
