App H5+ 实现下载、查看功能 前后端实现(SpringBoot)

news2024/9/22 19:32:22

	<!doctype html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>维修指南</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0, maximum-scale=0.85, user-scalable=yes" />
			<meta name="apple-mobile-web-app-capable" content="yes">
			<meta name="apple-mobile-web-app-status-bar-style" content="black">
			<link href="../css/mui.min.css" rel="stylesheet" />
			<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
			<link href="../css/mui.poppicker.css" rel="stylesheet" />
			<style>
				html,
				body {
					background-color: #efeff4;
				}
			</style>
		</head>
		<body>
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 id="title" class="mui-title">维修指南</h1>
			</header>
			<div class="mui-content mui-scroll-wrapper">
				<div class="mui-scroll">
					<div class="mui-card">
						<ul class="mui-table-view" id="treeMenu"> 
						
						</ul>
						
					</div>
				</div>
			</div>

			<script src="../js/jq.js"></script>
			<script src="../js/mui.min.js"></script>
			<script src="../js/device_status.js"></script>
			<script>		
				(function(jq, $, doc) {
					var info = {};
					info.type="directory";
					info.fileName="";
					info.filePath="";
					$.init({
						swipeBack: true
					});
					$.plusReady(function() {
						getFileListInfo();
					});
					
					mui("#treeMenu").on('tap','.mui-table-view-cell',function(e){
						info.type="file";
						info.fileName = this.getAttribute("id");
						info.filePath = this.getAttribute("val");
						getFileListInfo()
					})
					
					mui("#treeMenu").on('tap','.download',function(e){
						var infoDownload = {}
						infoDownload.fileName = this.getAttribute("id");
						infoDownload.filePath = this.getAttribute("val");
						
						var routePath='/viewFile';					
						routePath=deviceStatus.getAddress()+routePath + '?fileName=' + infoDownload.fileName + '&filePath=' + infoDownload.filePath;
			
						console.log(routePath)
						var url = encodeURI(routePath);
						//方式一
						// var downToak =plus.downloader.createDownload(routePath, {retryInterval:10}, function(d, status){
						// 						if(status == 200){
						// 							var btnArray = ['否', '是'];
						// 							mui.confirm('是否采用第三方方式打开?', '预览', btnArray, function(e) {
						// 								if (e.index == 1) {
						// 									plus.runtime.openFile(d.filename, {}, function(e) {//打开文件
						// 										plus.nativeUI.toast('打开失败');
						// 									});
						// 								} else {
						// 								}
						// 							});
													
						// 						}else{
						// 							plus.nativeUI.alert("文件查看失败!");  
						// 						}
						// 					});
						// 					downToak.start();
						//方式二
						
						var wait = plus.nativeUI.showWaiting("正在打开文件...");
						var dtask = plus.downloader.createDownload(url, {retryInterval:10}, function(d, status) {
								if(status == 200) {
									plus.runtime.openFile(d.filename, {}, function(e) {
										wait.close();
										mui.alert("无法打开此文件:" + e.emssage, "我的软件");
									});
									wait.close();
								} else {
									wait.close();
									mui.alert("文件打开失败: " + status, "我的软件");
								}
						});
						dtask.start();
					})
					
					
					
					function getFileListInfo(){
						deviceStatus.FileGetListInfo(info,function(list, err){
							if(err){
								$.toast(err);
								return;
							}
							var menu = ''
							mui.each(list,function(i,n){
								menu = menu + treeMenu(n)
							})
							// console.log("menu:"+menu)
							if(info.type=="directory"){
								jq('#treeMenu').append(menu);
							}
							else{
								jq('#'+info.fileName).empty();
								menu = '<a class="mui-navigate-right" href="#">'+info.fileName+'</a>'+menu
								jq('#'+info.fileName).append(menu);
							}
								
						});
					}
					
					function treeMenu(n){
						var result = ''
						if(n.children != undefined){
							result = '<li class="mui-table-view-cell mui-collapse" id="'+n.label+'" val="'+n.path+'">'+
									'<a class="mui-navigate-right" href="#">'+n.label+'</a>'
							var childFile = ''
							mui.each(n.children,function(i,n){
								childFile = childFile + treeMenu(n)
							})
							result = result + childFile + '</li>'
						}else if(n.size != undefined){
							result = '<div class="mui-row mui-collapse-content">'+
									'<p class="mui-col-sm-10 mui-col-xs-10" style="padding: 1%;">'+n.label+'</p>'+
									'<p class="mui-col-sm-2 mui-col-xs-2 download" style="padding: 1%;color:blue;"  id="'+n.label+'" val="'+n.path+'">查看</p>'+
									'</div>'
						}
						return result
					}

				}($, mui, document));
				//允许滑动
				(function() {
					mui('.mui-scroll-wrapper').scroll({
						bounce: true, //是否启用回弹
						indicators: true, //是否显示滚动条
						deceleration: 0.0006
					});
				})();
			</script>
			<style>
				
			</style>
		</body>
	</html>

 Ajax

owner.FileDownload = function(info) {
		var routePath='/viewFile';
		// callback = callback || $.noop;
		routePath=owner.getAddress()+routePath + '?fileName=' + info.fileName + '&filePath=' + encodeURI(info.filePath);
		// var userId=owner.getUser();
		// //创建访问参数
		// var paraJson={};
		// paraJson.userID=userId;
		// paraJson.file_name=info.fileName;
		// paraJson.file_path=info.filePath;
		
		// var paraData=JSON.stringify(paraJson);
		console.log(routePath)
		
		var wait = plus.nativeUI.showWaiting("正在打开文件...");
		var dtask = plus.downloader.createDownload(routePath, {retryInterval:10}, function(d, status) {
				if(status == 200) {
					plus.runtime.openFile(d.filename, {}, function(e) {
						wait.close();
						mui.alert("无法打开此文件:" + e.emssage, "我的软件");
					});
					wait.close();
				} else {
					wait.close();
					mui.alert("文件打开失败: " + status, "我的软件");
				}
		});
		dtask.start();
};

以上为前端,以下为后端

@RequestMapping(value = "/viewFile",method = {RequestMethod.POST,RequestMethod.GET})
    public void pdfStreamHandler(HttpServletResponse response,String fileName,String filePath)  throws ServletException,IOException {

        InputStream in = null;
        String errorMsg=null;
        String userID="-1";
        try {

            fileName =java.net.URLEncoder.encode(fileName,"UTF-8");很重要!!!如果没有这样编码文件名,下载的时候,如果是中文,下载文件名会乱码。
			in = new FileInputStream(new File(filePath));//本地文件

            String fileDirPath=uploadFileParentPath+fileName;
            if(filePath==null || filePath.equals("")) {
                filePath=fileDirPath;
            }

            File file=new File(filePath);
            if(!file.exists()){
                return;
            }

            // 重置response对象中的缓冲区,该方法可以不写,但是你要保证response缓冲区没有其他数据,否则导出可能会出现问题,
            response.reset();
            response.setContentType("bin");//application/octet-stream
            // 直接下载时加attachment,预览时候不加
//			response.addHeader("Content-Disposition", "attachment; filename=\""+fileName+"\"");
            response.addHeader("Content-Disposition", "attachment; filename=\""+fileName+"\"");

            byte[] buffer = new byte[1024];
            int length;
            while ((length = in.read(buffer)) > 0) {
                response.getOutputStream().write(buffer, 0, length);
            }
        } catch (Exception e) {
//			logger.error("下载文件出错", e);
            e.printStackTrace();
        } finally {
            if (in != null) {
                try {
                    in.close();
                } catch (IOException e) {
                }
            }
        }
    }

 

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

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

相关文章

TotalSegmentator---针对CT/MRI数据的自动分割

很高兴在雪易的CSDN遇见你 VTK技术爱好者 QQ&#xff1a;870202403 公众号&#xff1a;VTK忠粉 前言 本文分享开源软件TotalSegmentator&#xff0c;该开源项目针对CT/MRI数据类型&#xff0c;对主要的解剖学结构进行自动分割&#xff0c;并且被集成到MITK中。希望对各…

GB28181设备如何添加

简介 此篇描述视频网关&#xff08;中间件&#xff09;接入大华、海康、ONVIF设备&#xff08;NVR、摄像头&#xff09;、GB28181设备步骤和流程。 阅读本文档之前建议先阅览视频网关&#xff08;中间件&#xff09;用户使用手册。 接入方式和说明 视频网关&#xff08;中间…

为什么Windows操作系统一定要每年重装一次

在日常使用中&#xff0c;我们的电脑保存了无数的数据&#xff0c;安装和卸载程序&#xff0c;在这个过程中变得越来越慢&#xff0c;越来越容易出现问题。除了升级电脑硬件之外&#xff0c;有一个简单的办法可以让我们的电脑焕然一新&#xff1a;每年重新安装一次操作系统。 …

NFS综合项目

现有主机 node01 和 node02&#xff0c;完成如下需求&#xff1a; 1、在 node01 主机上提供 DNS 和 WEB 服务 2、dns 服务提供本实验所有主机名解析 3、web服务提供 www.rhce.com 虚拟主机 4、该虚拟主机的documentroot目录在 /nfs/rhce 目录 5、该目录由 node02 主机提供的NFS…

七人共赢拼团模式的深度剖析与互助精神重塑

在当今电商的浩瀚星海中&#xff0c;七人共赢拼团模式以其创新的合作框架与激励体系&#xff0c;正引领着消费与商业的新潮流。这一模式不仅优化了购物体验&#xff0c;更深刻诠释了互助共赢的核心理念。以下&#xff0c;我们将从直推奖励、自动补齐机制及团队荣耀奖三个方面&a…

Markdown+Sphinx+Read_the_Docs的一些技巧

MarkdownSphinxRead_the_Docs可以用来构建个人主页或知识教程&#xff0c;搭建方法网上很多&#xff0c;可以参考这个大佬的文章。本文主要讲述一些技巧&#xff0c;可以让项目更加完美。 本人运行环境是WSL2 Ubuntu 22.04&#xff0c;Sphinx版本是7.3.7 文章目录 一 工程搭建…

生物打印后的生物力学过程

生物打印后的生物力学过程 3D生物打印技术在组织工程领域展现出巨大的潜力&#xff0c;但打印后组织的生物力学特性对其最终成功至关重要。本文将详细介绍打印后组织的生物力学特性及其在组织工程中的应用。 1. 打印后水凝胶交联 原位交联可以在生物打印过程中提供足够的机械…

cdn中配置ssl证书

##red## &#x1f534; 大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff0c;雄雄的小课堂。 SSL KEY 这个里面放的是&#xff1a;private.pem文件中的内容 SSL PEM 这个里面放的是&#xff1a;fullchain.crt文件中的内容&#xff0c;注意&#xff0c;这个…

Python 100道基础入门练习题!附解析

看书&#xff0c;看视频都可以帮助你学习代码&#xff0c;但都只是辅助作用&#xff0c;学好 Python&#xff0c;最重要的还是 多敲代码&#xff0c;多刷题。 不知道怎么找题刷题的小伙伴&#xff0c;可以看看这里今天带来了100道练习题。覆盖了基本语法&#xff0c;数据结构&…

【JavaWeb程序设计】Servlet(一)

目录 一、客户端通过login.jsp发出登录请求&#xff0c;请求提交到loginServlet处理。 1. 运行截图 2. 登录页面&#xff08;login.jsp&#xff09; 3. loginServlet 4. 登录成功页面&#xff08;loginSuccess.jsp&#xff09; 5. 登录失败页面&#xff08;loginFail.jsp…

探索一个精美的商品橱窗布局:HTML与CSS的魔法

在今天的文章中&#xff0c;我们将一起探索一个精心设计的商品橱窗布局&#xff0c;这个布局完全通过HTML和CSS来实现。这个布局不仅美观&#xff0c;而且功能强大&#xff0c;非常适合用于展示商品或任何需要网格化布局的内容。 效果图&#xff1a; 一、HTML结构 首先&#…

tableau标靶图,甘特图与瀑布图绘制 - 9

标靶图&#xff0c;甘特图与瀑布图 1. 标靶图绘制1.1 筛选器筛选日期1.2 条形图绘制1.3 编辑参考线1.4 设置参考线1.5 设置参考区间1.6 四分位设置1.7 其他标靶图结果显示 2.甘特图绘制2.1 选择列属性2.2 选择列属性2.3 创建新字段2.4 设置天数大小及颜色 3. 瀑布图绘制3.1 she…

【案例】python集成OCR识别工具调研

目录 一、前言二、Tesseract_OCR2.1、安装过程2.2、python代码使用三、PaddleOCR3.1、安装过程3.2、python代码使用四、EasyOCR五、ddddOCR六、CnOCR一、前言 因项目需要OCR识别能力,且要支持私有化部署。本文将对比市场一些开源的OCR识别工具,从中选择适合项目需要的OCR,且…

基于主成分分析PCA的一维时间序列信号降噪方法(Python)

主成分分析PCA是面向模式分类的特征提取最典型的工具&#xff0c;是满足上述映射准则的一种数据压缩的方法。作为经典的特征提取方法&#xff0c;是在不减少原始数据所包含的内在信息前提下&#xff0c;将原始数据集转化为由维数较少的“有效”特征成分来表示&#xff0c;使其在…

极狐Gitlab使用(1)

目录 续接上篇&#xff1a;极狐Gitlab安装部署-CSDN博客 1. 关闭注册功能 2. 创建群组 3. 创建用户 5. 邀请成员到群组 6. 设置导入导出项目源 7. 通过gitee导入库 8. 通过仓库URL导入 9. 自创建项目 10. 默认分支main的权限 11. 使用普通用户进入自建库 12. 创建用…

深入理解 go map

什么是 map 维基百科里这样定义 map: In computer science, an associative array, map, symbol table, or dictionary is an abstract data type composed of a collection of (key, value) pairs, such that each possible key appears at most once in the collection. 简单…

前端挑战:Tkinter布局与设计【三种布局】

前端挑战:Tkinter布局与设计【三种布局】 文章目录 前端挑战:Tkinter布局与设计【三种布局】前言Frame 窗口组件代码效果Tkinter的布局grid 网格布局效果展示:代码讲解pack 布局基本使用左右布局place 布局代码预览前言 作为一个前端开发,习惯性的用HTML去解决客户端的问题…

【Linux 线程】线程的基本概念、LWP的理解

文章目录 一、ps -L 指令&#x1f34e;二、线程控制 一、ps -L 指令&#x1f34e; &#x1f427; 使用 ps -L 命令查看轻量级进程信息&#xff1b;&#x1f427; pthread_self() 用于获取用户态线程的 tid&#xff0c;而并非轻量级进程ID&#xff1b;&#x1f427; getpid() 用…

卡尔曼滤波中dx更新公式

卡尔曼滤波是一种有效的递归滤波器&#xff0c;用于估计线性动态系统的状态。在标准的卡尔曼滤波中&#xff0c;系统和观测模型都是线性的&#xff0c;而在扩展卡尔曼滤波&#xff08;EKF&#xff09;和迭代卡尔曼滤波&#xff08;IKF&#xff09;中&#xff0c;系统或观测模型…

最受老板欢迎的监控员工电脑软件推荐!(6款真实测评)

你有没有遇到以下这种情况&#xff1a; 早晨刚到公司打开电脑&#xff0c;老板对着旁边同事大发雷霆突然发问&#xff1a; 小丽&#xff0c;你昨天上班期间刷抖音了&#xff1f; 你吓得瑟瑟发抖&#xff0c;老板咋知道的呢&#xff1f; 跟其他同事讨论才晓得&#xff0c;原…