【微信小程序】wx.downloadFile实现文件/附件预览、下载等功能

【微信小程序】wx.downloadFile实现文件/附件预览、下载等功能

在微信小程序开发过程中，我们会遇到附件预览、下载等功能，小程序有自带的下载预览方法，下面我们结合着例子给大家讲解一下。

1、wx.downloadFile(Object object)(官方)功能描述：

下载文件资源到本地。客户端直接发起一个 HTTPS GET 请求，返回文件的本地临时路径 (本地路径)，单次下载允许的最大文件为 200MB。使用前请注意阅读相关说明。
注意：请在服务端响应的 header 中指定合理的 Content-Type 字段，以保证客户端正确处理文件类型。

2、wx.downloadFile具体参数使用说明参见官方文档

微信公众平台小程序API-wx.downloadFile

3、使用实例

3.1 attachment.wxml页面写法

<!--attachment.wxml-->
<view  wx:for="{{attachmentList}}" wx:for-index="index" wx:for-item="item" wx:key="id">  
             <!-- 附件的图标 -->    
             <view class="name"><image class="img" src="../../static/images/attachment/{{item.attachmentImg}}.png" background-size="cover"></image></view>
              <!-- 附件  其中data-url是图片的路径，按照自己实际路径填写  data-name是图片的名字，按照自己实际值填写-->
             <view class="text" data-url="{{item.url}}" data-name="{{item.name}}"  bindtap="goPreview">{{item.name}}</view>       
</view>

实现效果如下

3.2 attachment.js实现方法goPreview

点击上面的附件，调用goPreview，进行预览或者下载

//attachment.js
 // 附件预览方法
function goPreview(event){
  var currentTarget = event.currentTarget; 
  let url=event.currentTarget.dataset.url;
  //如果文件名字没有后缀类型，获取URL的后缀类型
  let name=event.currentTarget.dataset.name.indexOf('.')<0?event.currentTarget.dataset.name+"."+getLastDecimalPart(url,'.'):event.currentTarget.dataset.name;
  wx.downloadFile({
    url: url,
    filePath:wx.env.USER_DATA_PATH+'/'+name,
    success: function (res) {
      const filePath = res.filePath
      wx.openDocument({
        filePath: filePath,
        showMenu:true, //默认是false，为true的时候，右上角有三个点
        success: function (res) {
          console.log('打开文档成功')
        }
      })
    }
  })    
}
//获取url的最后一个小数后面的字符串 比如 10.0.9.92:8001/localImanages/attachment/q1rqc6az3olcq5kfsuo8.xlsx, 获取的值为xlsx
function getLastDecimalPart(str, character) {
  let index = str.lastIndexOf(character); // 获取最后一个/的位置
    let lastSegment = str.substring(index + 1); // 截取最后一个/后的值
  return lastSegment;
}

3.3 附件打开效果

当goPreview这个方法里面的showMenu:true时候，才会有右上角的三个点菜单

点击右上角的三个点菜单，效果如下