微信小程序下载zip压缩包后解压，并且打开文件查看的内容-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序下载zip压缩包后解压，并且打开文件查看的内容。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在开发pc端后台管理系统的时候，经常会遇到这样的需求：下载zip到本地，然后用户双击压缩包，并借助电脑端的压缩软件打开压缩包，就可以查看里面的word、excel、pdf文件里面的内容。（这种需求，毫无疑问，对于我们前端开发工程师来说，已经是习以为常了）。

最近我在开发微信小程序的项目。后端和我说，下载zip的逻辑可以效仿pc端的逻辑。在微信小程序里，下载zip压缩包后解压，并且查看里面文件的内容，这个需求我没有做过。于是，我便查阅官网资料，实现了这个效果。

1、预备知识：

需要了解微信小程序的文件系统
需要了解FileSystemManager文件管理器的使用，可通过wx.getFileSystemManager()获取
需要了解wx.openDocument()方法是可以打开word、excel、pdf等文件

2、实现思路：

将压缩包下载到 “本地临时文件”
将 “本地临时文件” 解压到 “本地用户文件”
在 “本地用户文件” 的目录中，获取里面刚刚已解压的文件名称（.word，.excel，.pdf等）
将名称渲染到界面
点击界面的文件名称，即刻打开对应的文件

3、实现代码

index.wxml

<view>
  <view wx:for="{{files}}" wx:key="unique" data-item="{{ item }}" bindtap="open">{{ item }}</view>
</view>

index.js

Page({ 
  data: { 
    files: []
  }, 
  onLoad() {
    const fs = wx.getFileSystemManager()

    // 1、将压缩包下载到 “本地临时文件”
    wx.downloadFile({
      url: 'http://localhost/1.zip', // 后端给你的下载zip的接口
      success: res => {
        unzip(res.tempFilePath)
      },
    })

    // 2、将 “本地临时文件” 解压到 “本地用户文件” ，并且目录命名为yyy（可以随便啦）
    const unzip = filePath => {
      fs.unzip({
        zipFilePath: filePath,
        targetPath: wx.env.USER_DATA_PATH + `/yyy`,
        success: () => {
          readdir()
        }
      })
    }

    // 3、在 “本地用户文件” 的目录名称为yyy中，获取里面刚刚已解压的文件名称（.word，.excel，.pdf）
    const readdir = () => {
      fs.readdir({
        dirPath: wx.env.USER_DATA_PATH + `/yyy`,
        success: res => {
          this.setData({ 
            files: res.files
          })
        }
      })
    }
  },
  // 点击
  open(ev){
    let { target: { dataset: { item } }  } = ev
    wx.openDocument({
      filePath: wx.env.USER_DATA_PATH + `/yyy/${item}`,
      showMenu: true
    });
  }
 })

4、最终效果

点击可打开pdf文件。

微信小程序下载zip压缩包后解压，并且打开文件查看的内容