【H5】文件下载(javascript)

news2025/1/11 8:14:00

系列文章

【移动设备】iData 50P 技术规格
本文链接:https://blog.csdn.net/youcheng_ge/article/details/130604517

【H5】avalon前端数据双向绑定
本文链接:https://blog.csdn.net/youcheng_ge/article/details/131067187

【H5】安卓自动更新方案(app升级)
本文链接:https://blog.csdn.net/youcheng_ge/article/details/126759498

文章目录

  • 系列文章
  • 前言
  • 一、技术介绍
  • 二、软件开发(源码)
    • 2.1 前端代码(HTML5)
    • 2.2 后端源码(C#)
    • 2.3 前端代码(JavaScript)
  • 三、效果展示
    • 3.1 运行 WebAPI项目
    • 3.2 运行安卓手机
  • 四、资源链接


前言

本文主要介绍,手持机(前文介绍过,可以理解为工业级手机)软件自动更新机制,为啥要这么做呢?是因为生产车间有很多台“手持机”,派运维一一更新不现实,加上系统初期,难免会有各种各样的问题,需要及时发布最新版到“手持机”。
我们“更新机制”采用最简单的C/S架构,服务端(Server)部署一个WebAPI,在指定目录下存放一个更新包,当手持机客户端连接服务端时,自动对比软件版本,如果不一致就“自动推送更新”。
在这里插入图片描述

一、技术介绍

使用到 apiWebAPI 技术,具体网上查找。

二、软件开发(源码)

2.1 前端代码(HTML5)

单击、触发文件下载时间,以下是测试代码。
使用到:api.js、框架

<div class="aui-list-item-inner" onclick="checkUpdate(true)">
	<div class="aui-list-item-label">检查新版本</div>
	<div class="aui-list-item-right">
		<i class="aui-iconfont aui-icon-right aui-collapse-arrow"></i>
	</div>
</div>

2.2 后端源码(C#)

使用Visual Studio,创建WebAPI项目,Controllers目录下,创建 QRController.cs控制器。部分源码如下:

/// <summary>
/// 文件下载-app自动更新机制
/// </summary>
/// <returns>文件字节流</returns>
 [HttpGet]
 public HttpResponseMessage DownloadFile(string a_fileName)
 {
     try
     {
         //文件的服务器地址
         string filePath = HttpContext.Current.Server.MapPath("~/") + "filepath\\" + a_fileName;
         if (!File.Exists(filePath))
         {
             return new HttpResponseMessage(HttpStatusCode.NotFound);
         }

         FileStream stream = new FileStream(filePath, FileMode.Open);
         HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.OK);
         response.Content = new StreamContent(stream);
         response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
         response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
         {
             FileName = HttpUtility.UrlEncode(a_fileName)
         };
         response.Headers.Add("Access-Control-Expose-Headers", "FileName");
         response.Headers.Add("FileName", HttpUtility.UrlEncode(a_fileName));
         return response;
     }
     catch (Exception)
     {
         return new HttpResponseMessage(HttpStatusCode.NoContent);
     }
 }

2.3 前端代码(JavaScript)

根据服务端返回的URL,前端JavaScript执行文件下载,并显示进度条。

	api.download({
		url: source,
		report: true
	}, function(ret, err) {
		if (ret && 0 == ret.state) {
			/* 下载进度 */
			ShowToast("正在下载应用" + ret.percent + "%");
		}
		if (ret && 1 == ret.state) {
			/* 下载完成 */
			var savePath = ret.savePath;
			api.installApp({
				/* 安装app */
				appUri: savePath
			});
		}
	});

在这里插入图片描述

三、效果展示

直接运行WebAPI项目,看效果

3.1 运行 WebAPI项目

注意一定要有IP这个服务,否则没有,你就发布到IIS运行吧。
在这里插入图片描述

3.2 运行安卓手机

在这里插入图片描述

在这里插入图片描述

四、资源链接

需要用到 API.js前端框架,可以去 APICloud官网下载。
https://www.apicloud.com/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/717140.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

hivesql列转行

原表&#xff1a; 目标表&#xff1a; sql代码&#xff1a; select dp as 日期 ,city_name as 城市, split_part(subject,‘:’,1) as 指标, cast( split_part(subject,‘:’,2) as double ) as 数值 from( select trans_array(2,‘;’,dp,city_name,subject) as (dp,city_na…

探秘高逼格艺术二维码的制作过程-AI绘画文生图

前几天看到几个逼格比较高的二维码&#xff0c;然后自己动手做了一下&#xff0c;给大家看看效果&#xff1a; 1、文生图&#xff08;狮子&#xff09;&#xff1a; 2、文生图&#xff08;城市&#xff09;&#xff1a; 下边将开始介绍怎么做的&#xff0c;有兴趣的可以继续读…

Vault AppRole最佳实现过程

AppRole AppRole身份验证方法允许机器或应用程序使用 Vault 定义的角色进行身份验证。AppRole 的开放式设计支持使用不同的工作流和配置来应对大量应用程序。这种身份验证方法主要是面向自动化工作流程(机器和服务)设计的,对人类操作者不太有用。 “AppRole”代表一组 Vau…

大数据Doris(五十六):RESOTRE数据恢复

文章目录 RESOTRE数据恢复 一、RESTORE数据恢复原理 二、RESTORE 数据恢复语法 三、RESOTRE数据恢复案例 1、在 Doris 集群中创建 mydb_recover 库 2、执行如下命令恢复数据 3、查看 restore 作业的执行情况 四、注意事项 RESOTRE数据恢复 Doris 支持BACKUP方式将当前…

力扣 40. 组合总和 II

题目来源&#xff1a;https://leetcode.cn/problems/combination-sum-ii/description/ C题解&#xff1a; 这道题的难点在于解集中不能包含重复的组合。如果用set去重会造成超时&#xff0c;所以只能在单层递归逻辑中处理。通过识别下一个数与当前数是否相同&#xff0c;来修改…

抖音小程序--开启沙盒模式后一直报,获取白名单失败:您没有权限访问此应用

一. 出现问题 按照抖音开发文档创建沙盒环境&#xff0c;然后替换appid后一直报无权限&#xff0c;如下图&#xff1a; 最后才发现&#xff0c;登录抖音开发工具的账户必须是超级管理员账户&#xff0c;添加的协助开发者&#xff0c;就算给了全部权限&#xff0c;也依然会报上面…

Navicat 入选中国信通院发布的《中国数据库产业图谱(2023)》

7 月 4 日&#xff0c;2023 年可信数据库发展大会主论坛在北京国际会议中心成功召开。会上&#xff0c;中国信息通信研究院正式发布《中国数据库产业图谱&#xff08;2023&#xff09;》。作为中国数据库生态工具供应商&#xff0c;凭借易用、稳定、可靠的产品力&#xff0c;以…

【C++】4.工具:读取yaml配置信息

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍读取yaml配置信息。 学其所用&#xff0c;用其所学。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&#xff0c;下次更新不迷路&…

web学习1--maven--项目管理工具

写在前面&#xff1a; 这学期搞主攻算法去了&#xff0c;web的知识都快忘了。开始复习学习了。 文章目录 maven介绍功能介绍maven安装jar包搜索仓库 pom文件项目介绍父工程依赖管理属性控制可选依赖构建 依赖管理依赖的传递排除依赖可选依赖 maven生命周期分模块开发模块聚合…

产品的帮助中心怎么建设?关于帮助文档的7个小技巧

用户使用产品的过程中&#xff0c;常常会遇到与产品使用相关的问题。这时候&#xff0c;用户通常会面临三个选择&#xff1a;1.寻找客服的帮助 2.阅读产品帮助文档 3.放弃使用产品。 显然&#xff0c;对于企业而言&#xff0c;当然是希望能够帮助用户解决问题&#xff0c;使其…

shiro入门

1、概述 Apache Shiro 是一个功能强大且易于使用的 Java 安全(权限)框架。借助 Shiro 您可以快速轻松地保护任何应用程序一一从最小的移动应用程序到最大的 Web 和企业应用程序。 作用&#xff1a;Shiro可以帮我们完成 &#xff1a;认证、授权、加密、会话管理、与 Web 集成、…

车载通信,来看看SOA架构通信如何跨系统的

SOA车载跨系统通信 在车载系统中实现跨系统通信时&#xff0c;SOA架构&#xff08;Service-Oriented Architecture&#xff0c;面向服务的架构&#xff09;可以提供一种有效的解决方案。以下是一种基于SOA的车载跨系统通信的概述&#xff1a; 定义服务接口&#xff1a;首先&a…

2023年无线蓝牙耳机排行榜,十款无线蓝牙耳机品牌推荐

蓝牙耳机作为现代生活必备的电子产品之一&#xff0c;我们在选购时的选择就显得尤为重要。随着各大科技公司对蓝牙耳机功能的不断完善&#xff0c;用户对于耳机的期望也越来越高&#xff0c;音质、性能、降噪、舒适度等方面都成为了用户选择蓝牙耳机时考虑的因素。接下来我们一…

从零开始 Spring Boot 57:JPA中的一对多关系

从零开始 Spring Boot 57&#xff1a;JPA中的一对多关系 图源&#xff1a;简书 (jianshu.com) 在上篇文章中我们介绍了如何在 JPA 中实现实体的一对一关系&#xff0c;在关系型数据库设计中&#xff0c;除了一对一关系&#xff0c;还存在一对多关系。本篇文章介绍如何在 JPA 中…

Android仿淘宝、京东、拼多多搜索历史

详情见代码 &#xff1a;https://github.com/yixiaolunhui/FSearchHistory

计算机网络概述(一)

因特网概述 网络&#xff0c;互联网与因特网的区别联系&#xff1a; 以上是使用有线和无线链路连接的两个网络。那么&#xff0c;要让这两个网络连接起来&#xff0c;就需要路由器。若干个网络通过多个路由器互联起来&#xff0c;就称为了互联网。 因特网是当今世界上最大的互…

基于springboot+vue的高校二手交易系统(源代码+数据库)080

基于springbootvue的高校二手交易系统(源代码数据库)080 一、系统介绍 本项目前后端分离 本系统分为管理员、用户两种角色 用户角色包含以下功能&#xff1a; 登录、注册、(商品搜索、发布、收藏、下单)、评论、个人信息修改、密码修改、我的发布、我的订单、收藏夹 管理…

使用android studio将网站打包成apk(可以直接使用替换为自己的网站连接即可)

公司有这个需求生成一个webapp应用。前面一直在使用web与Android混合开发&#xff0c;越是后面你就发现越有意思。hbuildX官网不怎么维护&#xff0c;虽然一直说这是潮流&#xff0c;uni-app开发也挺火的&#xff0c;但是安卓开发特别是适配不同的手机型号&#xff0c;真的是头…

详解JS 作用域与作用域链、IIFE模式、js执行过程

文章目录 一、什么是作用域二. 全局作用域、函数作用域、块级作用域全局作用域函数作用域注意 if、for循环、while循环变量 块级作用域 二、什么是作用域链1. 什么是自由变量2.什么是作用域链3. 关于自由变量的取值 三、IIFE模式由来语法基本语法带参 四、JavaScript 执行过程编…

C++ 数据结构B 树

目录 1. 常见的搜索结构 2. B树概念 3. B-树的插入分析 4. B-树的插入实现 4.1 B-树的节点设计 4.2 插入key的过程 4.4 B-树的简单验证 4.5 B-树的性能分析 4.6 B-树的删除 5. B树和B*树 5.1 B树 5.2 B*树 5.3 总结 6. B-树的应用 6.1 索引 6.2 MySQL索引简介 6…