vue文件压缩与解压-JSZip库

 

const downloading = ref(true);
const modeldownload = (path: String) => {
  downloading.value = true;
  let path1 = "download4dtbd02?fileName=" + path;
  return new Promise((resolve, reject) => {
    EIService.downloadImg(path1).then(async (res: any) => {
      if (res) {
        modelRef.value.open();
        const { data, headers } = res
        const jszip = new JSZip()
        const zip = await jszip.loadAsync(data);
        for (const key in zip.files) {
          // 判断一个属性是定义在对象本身而不是继承自原型链
          if (Object.prototype.hasOwnProperty.call(zip.files, key)) {
            if (key.toUpperCase().endsWith('.OBJ')) {
              jszip.file(key)
                ?.async('blob')
                .then((content) => {
                  // console.info(content);
                  // 此时的content 是一个blob
                  const url = window.URL.createObjectURL(content)
                  objURL.value = url;
                })
            } else if (key.toUpperCase().endsWith('MTL')) {
              jszip.file(key)
                ?.async('blob')
                .then((content) => {
                  const url = window.URL.createObjectURL(content)
                  mtlURL.value = url;
                })
            } else {
            }
          }
        }
        downloading.value = false;
        resolve(true);
      }
    }).catch((err: any) => {
      downloading.value = false;
      reject(err)
    });
  });
}

其中 async 函数注意固定参数：

async(type[, onUpdate])

返回所要求类型的内容的Promise。

返回 : 内容的Promise。

始于: v3.0.0

形参

 

名称	类型	描述
type	String	结果的类型。更多。
onUpdate	Function	使用元数据对每个内部更新调用的可选函数。更多。

type选项

针对type的可用值：

• base64 : 结果将是一个字符串，即base64格式的二进制文件。
• text (or string): the result will be an unicode string.
• binarystring: 结果是“二进制”形式的字符串，每个字符使用1字节（2字节）。
• array: 结果将是字节数组（数字界于0到255之间）。
• uint8array : 结果将是Unit8Array。这需要一个兼容的浏览器。
• arraybuffer : 结果将是ArrayBuffer。这需要一个兼容的浏览器。
• blob : 结果将是Blob。这需要一个兼容的浏览器。
• nodebuffer : 结果将是nodejs缓冲。这需要nodejs。

 

乱码解决

一个zip文件有一个标志，说明文件名和注释是否用UTF-8编码。如果没有设置，JSZip就无法知道所使用的编码。它通常是操作系统的默认编码。

windows系统默认是GBK 

使用  

iconv-lite 

yarn add iconv-lite
import iconv from 'iconv-lite';
 
        const zip = await jszip.loadAsync(data, {
          checkCRC32: false,
          optimizedBinaryString: false, // 当且仅当输入是字符串，并已经带有0xFF前导掩码时，才设置为true。
          createFolders: false,
          // 解决中文乱码
          decodeFileName: (name: any) => {
            // 使用 iconv-lite
            return iconv.decode(name, 'GBK');
          }
        });