zoukankan      html  css  js  c++  java
  • 微信小程序下载wod,exc,pdf,并显示进度条

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

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

    <view class="bili">
        <view style="35%;line-height:60rpx;text-align: left;">下载状态:</view>
        <view style="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
                   });
                 }
               });
    },
  • 相关阅读:
    分享Silverlight/WPF/Windows Phone一周学习导读(12月27日1月2日)
    分享Silverlight/WPF/Windows Phone一周学习导读(1月17日1月23日)
    分享Silverlight/WPF/Windows Phone一周学习导读(1月9日1月16日)
    失眠随笔
    Unix编程艺术:多道程序设计
    xm create的过程
    Unix编程艺术:透明性
    创建逻辑卷的过程
    hvm tap vs vif
    xen bootloader
  • 原文地址:https://www.cnblogs.com/hurenjie/p/13280501.html
Copyright © 2011-2022 走看看