微信小程序下载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 } }  } = evwx.openDocument({filePath: wx.env.USER_DATA_PATH + `/yyy/${item}`,showMenu: true});}})

4、最终效果

点击可打开pdf文件。

其实，“解压zip压缩包”这个操作可以交给后端来解压，只是看看你的后端有没有空。欢迎阅读本篇文章，希望本篇文章能对您有帮助。如果您有更好的解决方案，欢迎留言评论！

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

@所有人，官网下载的微信小程序开发工具安装后黑屏咋办？
@所有人,官网下载的微信小程序开发工具安装后黑屏咋办? 一直这样,重复安装也是这样欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器所展示的欢迎页.如果你想学习如何使 ...
新手微信小程序制作教程步骤详解！
制作微信小程序方法: 1.在微信公众平台上申请一个小程序账号,申请完成之后需要进行微信认证,并且需要缴纳300元的认证费用.如果不缴纳300元的费用,微信小程序商城没有开通支付功能. 2.新建一个空白 ...
微信小程序框架(四)-全面详解（学习总结---从入门到深化）
目录路由_navigateTo 页面跳转携带参数返回上一级页面路由_redirectTo 页面跳转路由_reLaunch 页面跳转路由_switchTab 实现 tabbar 页面跳转交 ...
php小程序onload,微信小程序 loading 组件实例详解
这篇文章主要介绍了微信小程序 loading 组件实例详解的相关资料,需要的朋友可以参考下 loading通常使用在请求网络数据时的一种方式,通过hidden属性设置显示与否主要属性: wxml 显 ...
微信小程序下载视频到相册（带进度条）
微信小程序下载视频到相册,并带进度条 <button class="desc-note my-button u-font-32" @click="toUpload( ...
微信小程序下载文件至本地，并打开文档
微信小程序下载文件至本地,并打开文档 downloadfile(e){var url = e.currentTarget.dataset.url;//下载文件,生成临时地址wx.downloadFil ...
微信小程序页面跳转后定时器如何关闭
微信小程序页面跳转后定时器如何关闭 1.在页面中定义,定时器形参,并在跳转到其它页面后,在隐藏和未加载中删除定时器 Page({data: {timer:'',//定义定时器形参,为空字符在这里插入代 ...
微信小程序下载与注册
微信小程序下载 :点击进入下载任意一个都可以:我个人是稳定版下载完打开工具显示: 为了方便使用获取AppID我们需要注册微信小程序: 用自己邮箱注册之后进去找到开发者管理这就找到了我们所需要的 ...
微信小程序下载网络图片保存到本地
微信小程序下载网络图片保存到本地问题背景前一篇文章介绍了,微信小程序网络请求数据并在页面列表显示(参考 https://blog.51cto.com/baorant24/6189453 ),本文将 ...

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

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

最新文章

热门文章