vue基于pako.js实现文gzip文件解压，处理从接口拿到的gzip文件流

原创已于 2022-02-10 16:58:17 修改 · 5.3k 阅读 ·

大模型引用 1 次

本内容遵循CC 4.0 BY-SA版权协议

Ya_Wen

关注

标签

#vue.js #javascript #前端

分类前端开发

于 2022-02-10 16:48:34 首次发布

jQuery and javascript 同时被 3 个专栏收录

14 篇文章

订阅专栏

Vue

3 篇文章

订阅专栏

插件

2 篇文章

订阅专栏

本文介绍如何在Vue.js项目中利用pako.js库处理从接口获取的gzip文件流，包括安装pako.js、发送GET请求、解压缩数据及确保汉字正确显示的完整过程。

1.安装pako.js

npm install pako

2.使用GET请求获取gzip文件流

axios({
  method: 'get',
   url: 'https://xxx/xxx.gz',
   responseType: 'arraybuffer', // 注意这个参数必须加，不然会出现下载好的文件打开是乱码情况,这个参数是为了告诉axios请求，请求的是二进制数据流
 })

3.处理返回的文件流

const byteArray = new Uint8Array(res.data); // 切换数据编码为Uint8Array
const pakoArr = pako.ungzip(byteArray); // 调用 pako 的方法解压数据

4.解压后将数据转化为字符串，并兼容汉字

const data = this.Utf8ArrayToStr(pakoArr);

Utf8ArrayToStr(array) {
  let str = '';
   let i = 0;
   const len = array.length;
   let char1 = 0;
   let char2 = 0;
   let char3 = 0;
   let char4 = 0;
   while (i < len) {
     char1 = array[i += 1];
     // 当单个字节时, 最大值 '01111111', 最小值 '00000000' 右移四位 07, 00
     // 当两个字节时, 最大值 '11011111', 最小值 '11000000' 右移四位 13, 12
     // 当三个字节时, 最大值 '11101111', 最小值 '11100000' 右移四位 14, 14
     if (char1 >> 4 <= 7) {
       str += String.fromCharCode(char1);
     } else if (char1 >> 4 === 12 || char1 >> 4 === 13) {
       char2 = array[i += 1];
       str += String.fromCharCode(((char1 & 0x1F) << 6) | (char2 & 0x3F));
     } else if (char1 >> 4 === 14) {
       char2 = array[i += 1];
       char3 = array[i += 1];
      char4 = ((char1 & 0x0F) << 12) | ((char2 & 0x3F) << 6);
       str += String.fromCharCode(char4 | ((char3 & 0x3F) << 0));
     }
   }
   return str;
 },

所有完整代码

import axios from 'axios';
import pako from 'pako';

mounted() {
    axios({
      method: 'get',
      url: 'https://xxx/xxx.gz',
      responseType: 'arraybuffer', // 注意这个参数必须加，不然会出现下载好的文件打开是乱码情况,这个参数是为了告诉axios请求，请求的是二进制数据流
    }).then((res) => {
      const byteArray = new Uint8Array(res.data); // 切换数据编码为Uint8Array
      const pakoArr = pako.ungzip(byteArray); // 调用 pako 的方法解压数据
      const data = this.Utf8ArrayToStr(pakoArr);
    });
  },
  methods: {
    Utf8ArrayToStr(array) {
      let str = '';
      let i = 0;
      const len = array.length;
      let char1 = 0;
      let char2 = 0;
      let char3 = 0;
      let char4 = 0;
      while (i < len) {
        char1 = array[i += 1];
        // 当单个字节时, 最大值 '01111111', 最小值 '00000000' 右移四位 07, 00
        // 当两个字节时, 最大值 '11011111', 最小值 '11000000' 右移四位 13, 12
        // 当三个字节时, 最大值 '11101111', 最小值 '11100000' 右移四位 14, 14
        if (char1 >> 4 <= 7) {
          str += String.fromCharCode(char1);
        } else if (char1 >> 4 === 12 || char1 >> 4 === 13) {
          char2 = array[i += 1];
          str += String.fromCharCode(((char1 & 0x1F) << 6) | (char2 & 0x3F));
        } else if (char1 >> 4 === 14) {
          char2 = array[i += 1];
          char3 = array[i += 1];
         char4 = ((char1 & 0x0F) << 12) | ((char2 & 0x3F) << 6);
          str += String.fromCharCode(char4 | ((char3 & 0x3F) << 0));
        }
      }
      return str;
    },
},