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

5+ 实现下载文件并打开

这里演示，导出Excel 表格

相关Api：
downloader

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；