微信小程序下載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
               });
             }
           });
},