vue开发app端使用H5+下载文件流_清慕_qing的博客-程序员秘密_vue手机端下载文件

技术标签: vue  前端  vue.js  javascript  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中参数还有其他配置,有需要的可以看官方文档

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qingshui_zhuo/article/details/122112780

智能推荐

kali搭建go语言环境__空_白_的博客-程序员秘密_kali安装go

目录1. 下载安装包2. 进行解压操作,如图所示3. 安装完成后,删除安装包4.将解压后的Go文件夹移动到 /usr/local/目录下5.配置Go语言环境变量1)写入环境变量2) 在/home目录下新建go目录(文件名随意),然后在go目录下分别新建三个目录:3) 设置GOPATH环境变量4) 使环境变量生效6.检验Go语言环境安装是否成功1. 下载安装包到官网下载Go语言安装包,如图示操作(官网可能需要梯子,没有的可以从国内相关网站下载)下...

HIVE优化系列(1)-- 自动合并输出的小文件_安静的技术控的博客-程序员秘密

小文件的缺陷我们就不说了,直接进入到正题.HIVE自动合并输出的小文件的主要优化手段为:set hive.merge.mapfiles = true:在只有map的作业结束时合并小文件,set hive.merge.mapredfiles = true:在Map-Reduce的任务结束时合并小文件,默认为False;set hive.merge.size.per.task = 25600...

示波器参数理解_【ql君】qlexcel的博客-程序员秘密_示波器参数详解

示波器的三个重要参数是:带宽、采样率、存储深度。1.带宽定义:示波器带宽的定义没有变,就是输入一个正弦波,保持幅度不变,增加信号频率,当示波器上显示的信号是实际信号幅度的70.7%(即3dB衰减)的时候,该对应的频率就等于示波器带宽。100MHz的带宽在测量100MHz的正弦波时,幅度会下降到原来的0.7,但是100mhz带宽的示波器不能测100mhz的方波,因为方波由基波和奇次谐

Tensorboard--模型可视化工具_小陈同学-陈百万的博客-程序员秘密_模型可视化工具

Tensorboard1.tensorboard in tensorflow1.1 tensorboard的启动过程1.2 tf.summary 可视化类型1.3 tf.summary 使用demo2.tensorboard in pytorch2.1 SummaryWriter 使用demotensorboard in tensorflow :tensorboard 是一套用于tensorflow训练过程可视化工具,能够可视化模型的结构,参数,损失函数等。最常用于记录训练过程中参数和损失函数值的变化,

第四代自动泊车从APA到AVP技术_wujianming_110117的博客-程序员秘密

第四代自动泊车从APA到AVP技术前言自动泊车是指汽车自动泊车入位不需要人工控制,系统能够自动帮你将车辆停入车位,在倒车入库中可谓是驾驶者的一项利器。当我们找到一个理想的停车地点,只需轻轻启动按钮、坐定、放松,其他一切即可自动完成。自动泊车技术同样适用于主动避撞系统,并最终实现汽车的自动驾驶。不同的自动泊车系统采用不同的方法来检测汽车周围的物体。 有些在汽车前后保险杠四周装上了感应器,它们既可以充当发送器,也可以充当接收器。这些感应器会发送信号,当信号碰到车身周边的障碍物时会反射回来。然后,车上的

随便推点

TIFF图像文件格式详解_smilestone322的博客-程序员秘密

该文转自:http://blog.csdn.net/dcraw/archive/2011/05/24/6443537.aspx 1 什么是TIFF? TIFF是Tagged Image File Format的缩写。在现在的标准中,只有TIFF存在, 其他的提法已经舍弃不用了。做为一种标记语言,TIFF与其他文件格式最大的不同在于除了图像数据,它还可以记录很多图像的其他信息。它记录图像

Linux usb子系统_杨Jun的博客-程序员秘密

一、USB协议基础知识  前序:USB概念概述  USB1.0版本速度1.5Mbps(低速USB) USB1.1版本速度12Mbps(全速USB)  USB2.0版本速度480Mbps(高速USB)。  USB 分为主从两大体系,一般而言, PC 中的 USB 系统就是作主,而一般的 USB 鼠标, U 盘则是典型的 USB 从系统。  USB主控制器这一块,我们至少要开发出 US

微信浏览器唤醒App_紫轩阁的博客-程序员秘密_微信浏览器打开app

实现效果如下图所示,顶部会有一个广告图,点击这个广告图,如果手机上已经安装了App,则直接打开,如果没有安装,则开始下载,如果在微信公众号中,则跳转应用宝第三方平台跳转。html<span @click="openAppClick" class="see-btn">打开APP</span>jsopenclient(){ let ua = navigator.userAgent.toLowerCase(); //config 配置文件 JS 传递

网络编程课堂笔记_diaowei6622的博客-程序员秘密

网络编程软件开发架构c/s架构c:客户端s:服务端b/s架构b:浏览器s:服务端手机端:好像C/S架构比较火,其实不然,微信小程序,支付宝第三方接口都类似于b/s架构目的都在于统一接口,聚集用户群pc端:b/s比较火本质:b/s架构本质也是c/s架构客户端与服务端概念服务端:24小时不间断提供服务,谁来我就服务谁...

Android 应用(7)——untrusted_app访问底层硬件_横山郡守的博客-程序员秘密_untrusted_app

参考链接:https://blog.csdn.net/Sunxiaolin2016/article/details/91039775https://blog.csdn.net/scottmvp/article/details/115871037背景:用户自行开发的app需要访问底层serial port。我们开发的app在SELinux(或SEAndroid)中分为主要三种类型(根据user不同,也有其他的domain类型):1)untrusted_app 第三方app,没有Android平台签名

单元测试小记_markix的博客-程序员秘密

工具Junit:测试框架Mockito:模拟框架(模拟数据、模拟方法…)https://site.mockito.orgPowerMock:更强大的模拟框架(支持模拟静态方法、私有方法…)https://github.com/powermock/powermockJaCoCo:代码覆盖率统计工具https://www.jacoco.org/jacoco/index.html使用使用Mockito比如要测试Service类,则需要将service类中的dao给mock掉。@Inje