uniapp——App 监听下载文件状态，打开文件（三）

5+ 实现下载文件并打开

这里演示，导出Excel 表格

文章目录

• • 5+ 实现下载文件并打开
  • • DEMO
    • 监听下载进度效果图
    • 为什么 totalSize 一直为0？

DEMO

提示：

• 请求方式支持：GET、POST；POST 方式需要设置Content-Type；
• 暂停下载任务： dtask.pause();
• 取消下载任务：dtask.abort();
• 监听下载文件：实时状态，根据个人所需可以在页面上添加进度条等UI效果；

h5PlusDownloadFile() {
    let header = {
        token: getToken(),
        'Content-Type': 'application/json' // 设置 POST 请求提交的数据类型为JSON字符串
    }
	
	// 下载任务的参数
    let options = {
        method: 'POST',
        filename: `_doc/test_${new Date().getTime()}.xlsx` // 支持以"_downloads/"、"_doc/"、"_documents/"开头
    }
    
    // 创建下载任务
    let url = 'https://xxx/export';
    var dtask =	plus.downloader.createDownload(url, options, (d, status) => {
        console.log('下载完成', d, status);
        if(status == 200){ 
            console.log("Download success: " + d.filename);
            uni.showToast({
                title: '下载成功'
            })
            
            // 打开指定的文件
            plus.runtime.openFile(options.filename);
        } else {
            console.log("Download failed: " + status); 
            uni.showToast({
                title: '下载失败',
                icon: 'error'
            })
            plus.downloader.clear(); // 清除下载任务
        }  
    })

    // 设置下载请求头数据
    Object.keys(header).forEach((key) => {
        dtask.setRequestHeader(key, header[key]);
    })

    // 监听下载任务状态，根据个人所需 实现进度条等
    dtask.addEventListener("statechanged", this.onStateChanged, false);

    // 开始下载
    dtask.start();
},
onStateChanged(download, status) {
    // Download对象管理一个下载任务
    console.log('监听下载状态--->文件的总大小/已完成下载文件的大小：', download.totalSize, download.downloadedSize);
    
    if(download.state == 4 && status == 200){
        // 下载完成 
        console.log("onStateChanged Download success: " + download.getFileName());  
    }  
},

监听下载进度效果图

• 截取后面部分效果图
  

为什么 totalSize 一直为0？

• 下载任务开始传输数据时更新，在此之前其值为0。 此值是从HTTP协议的Content-Length中获取，如果服务器未返回Content-Length数据则此值始终为0；