5+ 实现下载文件并打开
这里演示，导出Excel 表格
文章目录
- 5+ 实现下载文件并打开
- DEMO
- 监听下载进度效果图
- 为什么 totalSize 一直为0？
相关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；
