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

	<!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>'+menujq('#'+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.mzph.cn/bicheng/43454.shtml

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

相关文章

下半年交火点:智驾全国都能开,智舱多模态大模型

“你猜一猜我现在参加什么样的活动呢&#xff1f;” “你参加的是WAIC&#xff0c;就是那个人工智能的大Party&#xff0c;超多科技高手都在这……” “你帮我介绍一下这本书吧。” “这书叫《反脆弱&#xff0c;从不确定性中获益》&#xff0c;讲的是怎么在混乱里找机会&am…

闲聊C++与面向对象思想

艾伦凯曾说&#xff0c;“I made up the term object-oriented, and I can tell you I did not have C in mind.”&#xff08;“我发明了术语‘面向对象’&#xff0c;可以告诉您我没有C”&#xff09;。 今天看到这句话&#xff0c;激发了笔者写一篇文章聊聊C与面向对象思想…

搞不清啊?伦敦金与上海金区别是?

进入黄金市场的朋友&#xff0c;有可能会被各式各样的黄金交易品种带得眼花缭乱&#xff0c;其实各品种虽然都以黄金作为投资标的物&#xff0c;但是也是各有不同的&#xff0c;下面我们就来比较一下相似的投资品种——伦敦金和上海金。 首先在比较之前&#xff0c;我们要搞清楚…

基于泰坦尼克号生还数据进行 Spark 分析

基于泰坦尼克号生还数据进行 Spark 分析 在这篇博客中&#xff0c;我们将展示如何使用 Apache Spark 分析著名的泰坦尼克号数据集。通过这篇教程&#xff0c;您将学习如何处理数据、分析乘客的生还情况&#xff0c;并生成有价值的统计信息。 数据解析 • PassengerId &#…

快速排序[原理,C++实现,注意事项,时间复杂度分析]

模板&#xff1a; //本模板来自ACwing void quick_sort(int q[],int l,int r) {if(l>r) return;int xq[lr>>1],il-1,jr1;while(i<j){do i;while(q[i]<x);do j--;while(q[j]>x); if(i<j) swap(q[i],q[j]);}quick_sort(q,l,j);quick_sort(q,j1,r); };原理&…

江苏高防服务器都有哪些优势?

江苏高防服务器所针对的应用群体是不同的&#xff0c;高防服务器与普通服务器的应用效果和功能上是有着很大的差别&#xff0c;所以企业与用户在进行挑选高防服务器时&#xff0c;会更加看重服务器的质量与服务效果&#xff0c;本文就来聊一下江苏高防服务器的优势有哪些吧&…

1509.三次操作后最大值与最小值的最小差

1.题目描述 给你一个数组 nums 。 每次操作你可以选择 nums 中的任意一个元素并将它改成 任意值 。 在 执行最多三次移动后 &#xff0c;返回 nums 中最大值与最小值的最小差值。 示例 1&#xff1a; 输入&#xff1a;nums [5,3,2,4] 输出&#xff1a;0 解释&#xff1a;我们最…

字典操作(获取类操作、添加更新类操作、字典删除类操作)

字典数据获取类操作 keys() 用来获取字典中所有的 key, 保存到一个列表中&#xff0c;并以 dict_keys类型返回 stu {name: Tom, age: 23, gender: male, address: BeiJing} ks stu.keys() print(ks)values() 用来获取字典中所有的 value &#xff0c;保存到一个列表中&#…

注册中心组成结构和基本原理解析

假如你正在设计和开发一个分布式服务系统&#xff0c;系统中存在一批能够独立运行的服务&#xff0c;而在部署上也采用了集群模式以防止出现单点故障。显然&#xff0c;对于一个完整的业务系统而言&#xff0c;这些服务之间需要相互调用并形成复杂的访问链路&#xff0c;一种可…

Casual decoder 和prefix decoder 区别

Causal Decoder&#xff08;因果解码器&#xff09;和Prefix Decoder&#xff08;前缀解码器&#xff09;是两种不同的语言模型架构&#xff0c;它们在处理文本生成任务时采用不同的注意力机制。 Causal Decoder是一种自回归模型&#xff0c;它在生成文本时只能依赖于已经生成…

mysql面试题 Day5

1 什么是事务&#xff1f; 事务是指 多个数据库操作组成一个逻辑执行单元&#xff0c;满足ACID四个条件。 A是指原子性&#xff0c;事务保证操作要么全部完成&#xff0c;要么全部不完成&#xff0c;不会出现部分完成的情况&#xff1b; C是指一致性&#xff0c;事务执行后&…

C++ 定时器触发

c定时器&#xff0c;能够定时触发&#xff0c;即每隔一段固定时间执行一下函数 #include <iostream> #include <thread> #include <chrono> #include <signal.h> #include <time.h> #include <cstring> #include <glog/logging.h>#…

SQL Server解决Float字段使用ISNULL时报错

SQL Server解决Float字段使用ISNULL时报错 一、前言1.报错内容2.解决案例 一、前言 1.报错内容 > [42000] [Microsoft][ODBC Driver 17 for SQL Server][SQL Server]从数据类型 varchar 转换为 float 时出错。 (8114)。这个错误通常是由于SQL Server在执行ISNULL函数时遇到…

防抖和节流使用场景

防抖&#xff08;Debounce&#xff09;和节流&#xff08;Throttle&#xff09;是两种常用的性能优化技术&#xff0c;用于限制某些高频率执行的函数的调用次数&#xff0c;从而优化性能和用户体验。它们的主要区别在于控制函数执行频率的策略不同。 防抖&#xff08;Debounce…

Mini-L-CTF-2022 minispringboot Thymeleaf模板注入 spel的绕过

Mini-L-CTF-2022 minispringboot Thymeleaf模板注入 spel的绕过 就是一个低版本的Thymeleaf注入 漏洞点 public class MainController {GetMapping({"/{language}"})public String test(PathVariable(name "language") String language, RequestParam(…

codesys多段直线电机跨电机控制

1. 电机描述 在X轴上有多段直线电机&#xff0c;如下图有9个&#xff0c;从X1到X9. 2.codesys程序结构 程序名称&#xff1a;Pou_two_motors 动作名称&#xff1a;ACT_move 把这个程序搞到任务配置里面 通过ethercat总线命名一下这些电机&#xff0c;方便调用。 3.程序内容 P…

油烟监测仪:守护厨房,让蓝天白云成为常态

夏日炎炎&#xff0c;白天的酷暑让人们更加向往夜晚的凉爽与惬意。在这样的季节里&#xff0c;品尝各式烧烤、小龙虾&#xff0c;再搭配一杯冰镇啤酒&#xff0c;成为了许多市民夜晚消遣的不二选择。然而&#xff0c;随之而来的餐饮油烟问题也进入了高发阶段&#xff0c;对周边…

智能锁赛博化,凯迪仕携全球顶尖科技亮相建博会!

7月8日&#xff0c;作为大家居建材行业全球规模第一大展&#xff0c;2024中国建博会&#xff08;广州&#xff09;在广交会展馆正式拉开序幕。据官方数据显示&#xff0c;本届展会展出规模展览总规模近40万平方米&#xff0c;建筑装饰领域各细分题材的一线品牌几乎全部参展。 其…

构建安全稳定的应用:SpringSecurity实用指南

以下是关于构建安全稳定的应用&#xff1a;Spring Security 实用指南的详细介绍&#xff1a; 一、Spring Security 概述 Spring Security 是一个功能强大且高度可定制的安全框架&#xff0c;旨在为 Java 应用程序提供全面的安全解决方案。它涵盖了认证&#xff08;Authenticati…

循环练习题

思路&#xff1a; 代码&#xff1a; public static void main(String[] args) {double sum0;for (int i1;i<100;i){if (i%2!0){sum1.0/i;}else {sum-1.0/i;}}System.out.println(sum);} 结果为&#xff1a;