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

最新推荐文章于 2024-07-25 20:50:09 发布
最新推荐文章于 2024-07-25 20:50:09 发布
阅读量2.2w 收藏 15
点赞数 5
文章标签： 移动开发 javascript 面试 ViewUI
原文链接：https://segmentfault.com/a/1190000015681014
版权
本文详细介绍了在H5页面中实现apk、txt等文件下载的三种方法，包括通过改变`location.href`、利用`iframe`以及使用`form`的`action`属性。重点讨论了在避免空白页和不影响页面布局的情况下，如何优雅地实现文件下载，强调了知识融会贯通的重要性。
摘要由CSDN通过智能技术生成

需求描述

接到的原始需求是这样的，有一个H5页面，页面中有个“点击下载”的按钮，点击之后，完成下载特定的apk。
大概是下面这样的?：
图片描述

需求分析

接到需求的时候我偷乐了一下，这个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';

拿在浏览器里面试了下，多个安卓机型都可以走通，然后我美滋滋得交付了任务，收拾收拾东西回家。
然后…………

最低0.47元/天 解锁文章
weixin_34221112
关注
  • 5
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
嵌套页面h5怎么调起手机文件_详解Html5页面实现下载文件（apk、txt等）的三种方式...
weixin_39715187的博客
12-21 1657
需求描述接到的原始需求是这样的，有一个H5页面，页面中有个“点击下载”的按钮，点击之后，完成下载特定的apk。大概是下面这样的????：需求分析接到需求的时候我偷乐了一下，这个H5页面最大的优点是不在微信中使用(微信好坑，各种限制，基本上从微信浏览器里面实现直接下载apk是不太可能的)，如果是在平常的浏览器的话，就简单多了。功能实现于是我想到了第一种，点击下载按钮的时候改变location.href。方...
微信h5页面中下载app（apk）的解决方案
wendy9861的博客
03-08 5774
需求分析 通过扫描二维码下载APP已成为一个大家惯用且非常方便的下载方式了，微信也成为扫描二维码重要的工具，对于用户来说，说到扫一扫大家第一反应就是打开微信，这是用户习惯问题。很多商家也是熟知这一点，所以纷纷选择微信来推广h5、app或者营销活动之类的。然而在我们使用微信推广的时候，经常会遇到分享出去的链接被微信拦截或无法在微信内打开，也无法下载的问题。 那么遇到该问题，该怎么去解决呢？其实我...
H5网页打包成安卓apk（H5套壳成app）， 保姆级教程来咯
最新发布
都已经是第二年的立春、又何必执着于、当年的盛​夏呢？
07-25 961
说明，我什么其它功能都不要，所以我的功能模块我全部取消勾选了。就是应用的入口（线上的H5入口地址）
移动端H5文件下载
weixin_41648985的博客
12-09 6784
需求 在H5页面中添加下载按钮，点击按钮下载对应文件 常用方法：动态生成a标签，把链接地址给到href属性，触发一个click事件，进行下载 由于文件数据是通过接口请求回来的数据流,application/octet-stream类型，需要转换一下来使用： download () { let link = document.createElement('a') link.style.display = 'none' // 请求文件数据，返回类型为blob数据流，类型a
H5 移动端文件下载的方法
weixin_38946164的博客
09-17 7066
a 标签下载 // a标签下载文件，可跨域下载 function aDownlad(url, fileName) { const link = document.createElement('a') link.href = url link.target = '_blank' link.download = fileName link.style.display = 'none' document.bod
h5页面下载apk方法
shuai1999m的博客
07-07 3788
需求描述 接到的原始需求是这样的，有一个H5页面，页面中有个“点击下载”的按钮，点击之后，完成下载特定的apk。 大概是下面这样的?： 图片描述 需求分析 接到需求的时候我偷乐了一下，这个H5页面最大的优点是不在微信中使用（微信好坑，各种限制，基本上从微信浏览器里面实现直接下载apk是不太可能的），如果是在平常的浏览器的话，就简单多了。 功能实现 于是我想到了第一种，点击下载按钮的时候改变location.href。 方法一： // 我随便找了个apk的下载链接举个例子 window.location
微信中H5呼起浏览器下载app方法
weixin_39583725的博客
04-09 1597
微信中H5下载app文件方法实现思路前端示例代码java示例代码 实现思路 经测试微信发现如果下载文件是.apk文件会进行拦截，如果是别的下载文件（如：http://xxx/123.doc文件）会尝试呼起手机的默认浏览器进行下载（在个别手机会出现一个弹框让你选择浏览器）。 在这个过程当中会向后端发起两次下载请求，微信第一次发起的请求发现是下载链接，呼起浏览器再次发送下载链接请求。 根据上述情况，我...
详解Html5页面实现下载文件（apk、txt等）的三种方式
09-22
HTML5页面实现下载文件，尤其是apk或txt等不同类型的文件，是移动互联网应用中常见的需求。这篇文章主要介绍了三种方法来实现在HTML5页面上下载文件的功能。这些方法都是基于JavaScript和HTML元素的特性来实现的。 ...
APP下载H5页面纯静态html前端模板_静态照片会动的软件
12-04
标题中的“APP下载H5页面纯静态html前端模板”指的是一个用于展示应用程序（APP）下载信息的网页模板，该模板完全基于HTML静态语言构建。在Web开发中，H5通常是指HTML5，这是一种最新的超文本标记语言标准，具有更...
android TV端加载h5处理返回键的测试apk
03-04
- "TV_web"可能是包含测试apk和相关H5示例文件的目录，开发者可以通过分析这些文件来学习具体实现方式，包括WebView的设置、H5页面的加载和返回键处理逻辑。 总之，这个测试apk为Android TV上的H5应用开发提供了一...
download-app-templates:APP下载H5页面模板（持续更新）
08-03
APP下载H5页面模板 免费开源APP下载H5页面模板，支持微信、钉钉中打开已安装app，未安装自动跳到appstore，持续更新中...:laptop: 预览:trophy: Features原生js/css/html编码方式，易懂后端开发也可Swift配置或定制...
h5页面app下载
qq_38738033的博客
08-05 4711
直接打开链接即可（苹果请用自带的浏览器打开） 苹果方式1：应用id的url itms-apps://itunes.apple.com/app/id 1142110895 苹果方式2：ipa在线下载安装（itms-services） 1、ipa的下载地址放到plist的文件中（plist格式见下文） 2、plist的链接要求一定是https的，而且必须是公网ssl，自签名及免费的https不可用。 3、链接格式要求一定是符合苹果规范的，itms-services://?action=downlo
H5下载及引导功能
大小先生
09-27 914
最近在做H5下载功能的时候，苹果手机在微信内置浏览器内点击无响应，所以添加了引导页在浏览器打开。 苹果手机在系统13及以上版本支持下载，其他版本点击仍无反应。 效果展示： 图片：（借用网上某位大神的图片） html: <div id="shade"> <img id='img' src="../../../../assets/img/etoneWealth/ydload.png" alt="pic"> <div style="color: r
html5解析文件流,H5 读取文件流
weixin_36002349的博客
06-21 1027
代码：文件读取div {margin-top: 30px;border: solid 1px black;padding: 5px;}function processFiles(files) {var file = files[0];var message = document.getElementById("message");message.innerHTML = "文件名：" + file....
微信网页浏览器打开链接后跳转到其他浏览器下载APK文件包
01-07 582
做微信营销活动或者APK下载推广时候，是无法直接下载，做到微信中正常使用呢？这就要借助一些工具来实现有效的操作。 安卓手机的话是通过点击链接，直接跳转出微信。自动打开手机默认的浏览器。但是这个方法IOS的系统暂时还不行。所以只能写判断了。 演示地址：http://demo.liuy88.cn/wxjum_xf0107017 转载于:https://www...
apk文件下载网址
热门推荐
clearseven777的博客
01-09 2万+
自用
通过网页链接地址下载apk安装包
start的专栏
05-20 9752
String url = "http://192.168.0.1:80/test/a.apk" Uri uri = Uri.parse(url); Intent intent = new Intent(Intent.ACTION_VIEW, uri); context.startActivity(intent );  如果是一个apk文件，打开并且安装的函数为
2024 最新12个好用的APK下载网站，完美替代Google Play
shaoyangliu的博客
05-29 2636
如果你找的所有下载Google Play的工具全部被屏蔽，或者无法安装GMS导致无法使用Google Play ，或者以前下载了Google Play但现在打不开……
h5实现文件下载，兼容ios、android
weixin_44643019的博客
02-28 2万+
h5实现文件下载，兼容ios、android
h5页面怎么处理文件流_H5页面实现下载文件（apk、txt等）的三种方式
05-24
在H5页面中处理文件流可以使用Blob对象。Blob对象表示一个不可变、原始数据的类文件对象。我们可以通过Blob对象创建一个URL，然后使用a标签的download属性实现文件下载。 以下是H5页面实现下载文件的三种方式： 1.使用a标签下载 ```html <a href="文件地址" download="文件名">下载文件</a> ``` 2.使用XMLHttpRequest下载 ```javascript function downloadFile(url, fileName) { let xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.responseType = 'blob'; xhr.onload = function() { if (xhr.status === 200) { let blob = new Blob([xhr.response]); let link = document.createElement('a'); link.href = window.URL.createObjectURL(blob); link.download = fileName; link.click(); } }; xhr.send(); } ``` 3.使用fetch下载 ```javascript function downloadFile(url, fileName) { fetch(url) .then(res => res.blob()) .then(blob => { let link = document.createElement('a'); link.href = window.URL.createObjectURL(blob); link.download = fileName; link.click(); }); } ``` 以上三种方式都可以实现文件下载，具体选择哪一种方式可以根据自己的需求来定。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值