vue开发app端使用H5+下载文件流 |
您所在的位置：网站首页 › 花火视频下载文件路径 › vue开发app端使用H5+下载文件流 |
vue开发app端使用H5+下载文件流
|
最近公司要求使用vue开发移动端跟app端，踩了好多坑！很不明白为什么不用uniapp，好气！ 下面说说坑我最久的一个需求就是下载文件，知道怎么做了其他也不难 app端下载文件先附上官方文档：https://www.html5plus.org/doc/zh_cn/downloader.html 而我们要使用的就是H5+中的plus.downloader模块管理网络文件下载任务 从使用方式我分为三部分，即直接访问资源地址、通过后端接口请求（分为get、post） 新建下载任务API plus.downloader.createDownload(url, options, completedCB);options参数的配置 具体详情看官方文档，下面我们直接讲开发中如何使用 一.访问资源地址简单粗暴，直接贴代码 //资源地址 let picurl = `http://baidu.com/aa.png` // 参数 let data = { //自定义下载文件路径 filename: "file://storage/emulated/0/yingjitong/aa.png", //默认为GET请求。注意这里需大写“GET”、“POST” method: 'GET', } let dtask = plus.downloader.createDownload( picurl, data, (d, status)=>{ // 下载完成 if (status == 200) { this.$toast( '导出成功' ); // 将本地URL路径转换成平台绝对路径 plus.io.convertLocalFileSystemURL(d.filename); } else { dtask.clear(); //清除下载任务 this.$toast( '导出失败' ); } } ); // 开始下载 dtask.start(); 二.通过接口请求get请求 //后端接口 let picurl = `http://xxx/api/downloadFile` //get请求的参数需要拼接在接口后端,`http://xxx/api/downloadFile?name='123'` // 参数 let data = { //自定义下载文件路径 filename: "file://storage/emulated/0/yingjitong/aa.png", //默认为GET请求。注意这里需大写“GET”、“POST” method: 'GET', } let dtask = plus.downloader.createDownload( picurl, data, (d, status)=>{ // 下载完成 if (status == 200) { this.$toast( '导出成功' ); // 将本地URL路径转换成平台绝对路径 plus.io.convertLocalFileSystemURL(d.filename); } else { dtask.clear(); //清除下载任务 this.$toast( '导出失败' ); } } ); // 开始下载 dtask.start();post请求，跟get请求的传参方式不同，需要添加请求头 // 后端接口 let picurl = `${httpUrl}/event/api/sjjbjbsj/exportSjjbjbsj` let data = { // 参数 data:params, filename: "file://storage/emulated/0/yingjitong/突发事件统计表.xls", //post必须大写 method: 'POST', } let dtask = plus.downloader.createDownload( picurl, data, (d, status)=>{ this.exportActive = true // 下载完成 if (status == 200) { this.$toast( '导出成功' ); // 将本地URL路径转换成平台绝对路径 plus.io.convertLocalFileSystemURL(d.filename); } else { dtask.clear(); //清除下载任务 this.$toast( '导出失败' ); } } ); // post请求需要添加请求头 dtask.setRequestHeader( "Content-Type", "application/json" ); // 开始下载 dtask.start();plus.downloader.createDownload中参数还有其他配置，有需要的可以看官方文档 |
【本文地址】