vue文件压缩与解压-JSZip库

发布时间 2024-01-08 13:46:35作者: JserSuper

 

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');
          }
        });