微信小程序下载wod,exc,pdf,并显示进度条

html:这边的进度条用的是vant框架的进度条，不要问为什么不用小程序的Progress，因为反应迟钝

不了解vant的也可以顺便了解vant很好的框架，地址：https://youzan.github.io/vant-weapp/#/progress

<view class="bili">
    <view style="width:35%;line-height:60rpx;text-align: left;">下载状态：</view>
    <view style="width:65%;margin-top:28rpx"><van-progress percentage="{{add}}" /></view>
</view>
<view class="btn" bindtap="downloadFile" data-url="{{message.url}}" data-type="{{message.imagetype}}">
    下载文件
</view>

 

js:data声明的参数就不写了，这个type没用到，因为我们后端比较良心带了后缀，你们的后端如果不带就要自己拼接一下格式

 downloadFile: function(e) {
    var that=this
    console.log(e);
    let type = e.currentTarget.dataset.type;
    let url = e.currentTarget.dataset.url;
    const downloadTask = wx.downloadFile({
        url: url,
        header: {},
        success: function(res) {
            var filePath = res.tempFilePath;
            that.setData({//通过setData来修改
              filePath: filePath,
            });
            console.log(filePath);
            wx.openDocument({
                filePath: filePath,
                success: function(res) {
                    console.log(\'打开文档成功\')
                },
                fail: function(res) {
                    console.log(res);
                },
                complete: function(res) {
                    console.log(res);
                }
            })
        },
        fail: function(res) {
            console.log(\'文件下载失败\');
        },
        complete: function(res) {},
    })
    downloadTask.onProgressUpdate((res) => {
            if (res.progress === 100) {
             this.setData({
                add: \'100\'
              });
             } else {
               this.setData({
                 add: res.progress
               });
             }
           });
},