# UniZipTool

**Repository Path**: scenario-samples/uni-zip-tool

## Basic Information

- **Project Name**: UniZipTool
- **Description**: uni-app实现压缩/解压是实用工具类应用的高频使用场景之一，例如用户下载压缩文件后，需要先解压再使用。 

本示例使用zlib模块实现压缩和解压功能。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-27
- **Last Updated**: 2026-01-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# uni-app实现压缩/解压示例

## 场景介绍

uni-app实现压缩/解压是实用工具类应用的高频使用场景之一，例如用户下载压缩文件后，需要先解压再使用。

本示例使用[zlib模块](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-zlib)实现压缩和解压功能。

## 效果预览
<img src="screenshots/img_1.png" width="200">

## 实现思路

1. 导入@/uni_modules/harmony-zip后，调用压缩/解压方法。
```Vue
<template>
  <view class="content">
    <button type="default" @click="downloadFile">下载文件</button>
    <button type="default" @click="compressFile">压缩文件</button>
    <button type="default" @click="decompressFile">解压文件</button>
  </view>
</template>

<script>
  import {
    compressFile,
    decompressFile
  } from "@/uni_modules/harmony-zip";
  export default {
    data() {
      return {
        url: ''
      }
    },
    methods: {
      downloadFile() {
        uni.downloadFile({
          url: "https://xxxx.xxxx.xxx",
          success: (res) => {
            this.url = res.tempFilePath;
            console.info(`下载图片地址： ${this.url}`)
          }
        })
      },
      compressFile(url) {
        if (!this.url) {
          uni.showToast({
            title: 'url为空'
          })
          return;
        }
        compressFile(this.url)
      },
      decompressFile() {
        const zipFileUrl = '/data/storage/el2/base/temp/xxx.zip'
        decompressFile(zipFileUrl);
      }
    }
  }
</script>

<style>
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .content button {
    width: 100%;
  }
</style>
```

2. 新建插件路径为：\uni_modules\harmony-zip\utssdk\app-harmony\index.uts，导出了compressFile和decompressFile函数。
```uts
import { BusinessError, zlib } from '@kit.BasicServicesKit';

export function compressFile(inputUrl : string, outputUrl ?: string) {
  const inFile = inputUrl || '/data/storage/el2/base/temp/filename.xxx';
  const outFile = outputUrl || '/data/storage/el2/base/temp/xxx.zip';
  const options : zlib.Options = {
    level: zlib.CompressLevel.COMPRESS_LEVEL_DEFAULT_COMPRESSION,
    memLevel: zlib.MemLevel.MEM_LEVEL_DEFAULT,
    strategy: zlib.CompressStrategy.COMPRESS_STRATEGY_DEFAULT_STRATEGY
  };

  try {
    zlib.compressFile(inFile, outFile, options).then((data : void) => {
      console.info(`compressFile success. data: ${outFile}`);
    }).catch((errData : BusinessError) => {
      console.error(`errData is errCode:${errData.code}  message:${errData.message}`);
    })
  } catch (errData) {
    const code = (errData as BusinessError).code;
    const message = (errData as BusinessError).message;
    console.error(`errData is errCode:${code}  message:${message}`);
  }
}

export function decompressFile(inputUrl : string, outputDir ?: string) {
  const inFile = inputUrl || '/data/storage/el2/base/temp/xxx.zip';
  const outFileDir = outputDir || '/data/storage/el2/base/temp';
  const options : zlib.Options = {
    level: zlib.CompressLevel.COMPRESS_LEVEL_DEFAULT_COMPRESSION
  };

  try {
    zlib.decompressFile(inFile, outFileDir, options).then((data : void) => {
      console.info(`decompressFile success. data: ${outFileDir}`);
    }).catch((errData : BusinessError) => {
      console.error(`errData is errCode:${errData.code}  message:${errData.message}`);
    })
  } catch (errData) {
    const code = (errData as BusinessError).code;
    const message = (errData as BusinessError).message;
    console.error(`errData is errCode:${code}  message:${message}`);
  }
}
```


## 约束与限制

* 本示例支持API Version 20 Release及以上版本。
* 本示例支持HarmonyOS 6.0.0 Release SDK及以上版本。
* 本示例需要使用HBuilderX 4.87、DevEco Studio 6.0.0 Release及以上版本进行编译运行。



## 工程目录

```
├─App.vue                                   // 应用配置，用来配置App全局样式以及监听、应用生命周期
├─index.html                                // 用于web加载渲染的root节点
├─main.js                                   // Vue初始化入口文件
├─manifest.json                             // 应用相关配置
├─pages.json                                // 配置页面路由、导航条、选项卡等页面类信息
├─uni.scss                                  // 内置的常用样式变量
├─harmony-configs                           // harmony工程定制化配置目录，每次编译执行HBuilderX都会检查这个目录，如果目录不存在则会自动创建。
│  └─entry
│      └─src
│          └─main
│              └─module.json5               // 应用配置文件，配置requestPermissions等信息
├─pages
│  └─index
│      └─index.vue                          // 首页
│          
├─static                                    // 静态资源文件
└─uni_modules                               // 插件目录，用于存放uni-app的插件
```


## 参考文档
[zlib.compressFile](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-zlib#zlibcompressfile9)
[zlib.decompressFile](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-zlib#zlibdecompressfile9)

**【关联的社区问题】**

https://developer.huawei.com/consumer/cn/forum/topic/0202197044028095396?fid=0109140870620153026