H5页面实现下载文件(apk、txt等)的三种方式

泛型流星
• 阅读 31366

需求描述

----》》》评论里面指出有的类型的文件下载不了,主要是因为下面的方法本质上都是改变location.href,当浏览器不能‘理解’这种类型时,就会直接下载,反之,浏览器就会直接打开,并不会下载

接到的原始需求是这样的,有一个H5页面,页面中有个“点击下载”的按钮,点击之后,完成下载特定的apk。
大概是下面这样的👇:
H5页面实现下载文件(apk、txt等)的三种方式

需求分析

接到需求的时候我偷乐了一下,这个H5页面最大的优点是不在微信中使用(微信好坑,各种限制,基本上从微信浏览器里面实现直接下载apk是不太可能的),如果是在平常的浏览器的话,就简单多了。

功能实现

于是我想到了第一种,点击下载按钮的时候改变location.href。

方法一:

// 我随便找了个apk的下载链接举个例子
window.location.href = 'http://imtt.dd.qq.com/16891/26747DD8B125A8479AD0C9D22CA47BC9.apk?fsname=com.snda.wifilocating_4.2.91_3211.apk&csr=1bbd';

拿在浏览器里面试了下,多个安卓机型都可以走通,然后我美滋滋得交付了任务,收拾收拾东西回家。
然后…………
H5页面实现下载文件(apk、txt等)的三种方式
截图中所说的空白页是因为我改变href为apk的下载链接,网页打开的时候会停留在一个空白页,然后一般手机的状态栏上会出现下载apk的进度条。
既然不想出现空白页面的话,那不直接打开一个页面而改成在当前页打开就可以了。
这时候想到iframe,借助iframe可以在原页面打开一个页面。

方法二:

关键代码:

var src = 'http://imtt.dd.qq.com/16891/26747DD8B125A8479AD0C9D22CA47BC9.apk?fsname=com.snda.wifilocating_4.2.91_3211.apk&csr=1bbd';
var iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.src = "javascript: '<script>location.href=\"" + src + "\"<\/script>'";
document.getElementsByTagName('body')[0].appendChild(iframe);

使用iframe的话,既可以实现下载,又可以不重新打开页面,并且,对原页面的布局不会产生任何影响,最后我也是采取这种方案的。

方法三

第三种方法是偶然学到的,既然使用iframe可以,那使用form一定也是可以的,form的action也可以发请求。
于是改写了下第二种方法:

var src = 'http://imtt.dd.qq.com/16891/26747DD8B125A8479AD0C9D22CA47BC9.apk?fsname=com.snda.wifilocating_4.2.91_3211.apk&csr=1bbd';
var form = document.createElement('form');
form.action = src;
document.getElementsByTagName('body')[0].appendChild(form);
form.submit();

以上的代码也可以实现下载apk的需求。

总结

其实第二和第三种方法是扩展发挥了iframe和form的用法,单独来看,我们知道iframe可以在父页面里嵌套子页面,知道form的action可以发请求或者跳转页面,这是很常见的功能,但是不知道它们会被用在下载文件这个需求上,且产生的效果非常好。可见知识还是要融会贯通,举一反三的。
写这篇的时候我去查了下iframe,原来ajax等技术未出现的时候,有段时间业内常用的长轮询的方法竟然就是借助的iframe,有兴趣的也可以研究一下。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Karen110 Karen110
3年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
美凌格栋栋酱 美凌格栋栋酱
6个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Easter79 Easter79
3年前
vue+axios下载pdf文件流
项目中用到流文件下载的需求,之前使用的方法一直都没问题,但是这次就是下载不下来,查了多种方法终于解决了,方式如下://下载文件downLoadFile(e){letide.target.dataset.id;letnamee.target.dataset.name;
Jacquelyn38 Jacquelyn38
4年前
Js可以写桌面应用端?
1、下载nw.jshttps://nwjs.io/最好下载sdk版本。2、解压打开安装包下载完之后,解压打开图中的「app文件夹」是我自己创建的,你也需要自己创建一个,里面放你项目文件。「app文件夹」中一般放一个index.html(页面展示),另外还需要创建一个package.json文件(参数配置):        "name":  "first 
Jacquelyn38 Jacquelyn38
4年前
牛逼!五分钟开发一款桌面版应用
1、下载nw.jshttps://nwjs.io/最好下载sdk版本。2、解压打开安装包下载完之后,解压打开图中的app文件夹是我自己创建的,你也需要自己创建一个,里面放你项目文件。app文件夹中一般放一个index.html(页面展示),另外还需要创建一个package.json文件(参数配置):        "name":  "first  ap
Karen110 Karen110
3年前
​一篇文章总结一下Python库中关于时间的常见操作
前言本次来总结一下关于Python时间的相关操作,有一个有趣的问题。如果你的业务用不到时间相关的操作,你的业务基本上会一直用不到。但是如果你的业务一旦用到了时间操作,你就会发现,淦,到处都是时间操作。。。所以思来想去,还是总结一下吧,本次会采用类型注解方式。time包importtime时间戳从1970年1月1日00:00:00标准时区诞生到现在
Stella981 Stella981
3年前
Python+Selenium自动化篇
本篇文字主要学习selenium定位页面元素的集中方法,以百度首页为例子。0.元素定位方法主要有:id定位:find\_element\_by\_id('')name定位:find\_element\_by\_name('')class定位:find\_element\_by\_class\_name(''
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0