【H5】javascript文件下载

系列文章

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

【H5】Promise的用法
本文链接：https://blog.csdn.net/youcheng_ge/article/details/131634038

【H5】javascript文件下载
本文链接：https://blog.csdn.net/youcheng_ge/article/details/131539397

【H5】文件上传（ajax）
本文链接：https://blog.csdn.net/youcheng_ge/article/details/131538256

【H5】移动端，常见界面布局模板
本文链接：https://blog.csdn.net/youcheng_ge/article/details/131229989

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

【H5】Android自动更新（含源码）
本文链接：https://blog.csdn.net/youcheng_ge/article/details/126759498

---

前言

本专栏为 前端【H5】专栏，主要介绍HTML知识点。对于刚进入计算机世界的学生来说，学习课本上的知识是远远不够的，并且国内教材偏旧，所以需要我们通过互联网自主学习。
这里普及一个知识：HTML已不仅仅只能开发 Web，也可以开发移动端（Android、iOS），所以本专栏也会介绍 移动端的开发。
我个人将移动端开发，分为两大方向：

①原生开发
最早一批，使用安卓开发工具包（Android SDK）和Java语言来开发App的方式。原生开发允许开发者充分利用安卓平台的功能和特性，以及庞大的安卓开发社区资源。但缺点就是门槛高、需要适配不同尺寸的屏幕、测试繁琐，对开发人员技术要求高。

②混合开发（加壳方式）
当前热门，使用Web技术（网页三剑客HTML、CSS和JavaScript）开发App的方式，使用 vue.js、node.js、Angular.js、React.js、api.js等框架开发。混合开发具有较高的开发效率和跨平台的优势，由于使用Web技术进行 界面渲染样式丰富、屏幕适配（栅格技术自适应）效果好。但缺点就是对底层硬件调用库尚不完善，有时候会发生异常，对框架依赖较高，不过库在不断完善中，主要的相机、相册、GPS、存储调用是没有问题的。

HTML的全称为超文本标记语言，是一种标记语言。是前端的必备技术，一定要掌握好，后期使用前端框架，才不会无所适从。

一、技术介绍

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

二、项目源码

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/