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…

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

进入黄金市场的朋友&#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;这些服务之间需要相互调用并形成复杂的访问链路&#xff0c;一种可…

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;建筑装饰领域各细分题材的一线品牌几乎全部参展。 其…

循环练习题

思路&#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;

vscode取消未使用变量的提示(爆红)

目前项目正在使用ts&#xff08;TypeScript&#xff09;&#xff0c;可以在 tsconfig.json 文件中调整编译选项 在你的项目中找到并打开 tsconfig.json 文件&#xff0c;将noUnusedLocals和noUnusedParameters设置为false&#xff0c;关闭vscode重新打开项目即可 {"comp…

Mysql 高性能索引

引言 索引是一种用于快速查询和检索数据的数据结构&#xff0c;其本质可以看成是一种排序好的数据结构。 常见的索引类型包括B-Tree索引、哈希索引、空间数据索引&#xff08;R-Tree&#xff09;、全文索引。 索引的类型 在MySQL中&#xff0c;索引是在 存储引擎层 而不是服…

井字游戏00

题目链接 井字游戏 题目描述 注意点 1 < board.length board[i].length < 100输入一定遵循井字棋规则 解答思路 如果某一方想要获胜&#xff0c;则其需要占满某一行或某一列或对角线&#xff0c;所以只需要根据第一行和第一列判断是否填充完某一行或某一列或对角线…

EHS管理体系,重塑造企业竞争力的关键密码

在当今这个快速发展的时代&#xff0c;企业面临着前所未有的挑战与机遇。随着全球环保意识的普遍觉醒&#xff0c;以及社会各界对企业社会责任的日益关注&#xff0c;EHS&#xff08;环境&#xff0c;健康&#xff0c;安全&#xff09;管理体系成为了企业稳健前行的重要基石。它…

设计模式之Facade设计模式

Facade设计模式&#xff0c;也称为外观模式&#xff0c;是一种结构型设计模式&#xff0c;它主要用于为子系统中的一组接口提供一个统一的高层接口&#xff0c;从而使得子系统更加容易使用。以下是关于Facade设计模式的详细介绍&#xff1a; 一、定义 Facade模式为多个复杂的…

一款强大且免费开源的多连接数据库管理工具

大家好&#xff0c;今天给大家分享一款免费开源的跨平台数据库管理工具DbGate。 DbGate是一款免费开源的跨平台数据库管理工具&#xff0c;支持多种数据库&#xff0c;包括MySQL、PostgreSQL、SQL Server、MongoDB、SQLite等。它可以在Windows、Linux、Mac操作系统上运行&#…

【概念介绍】Signed Distance Function(SDF)

三维空间的表示形式可以分为显式和隐式 显式&#xff1a; 体素Voxel&#xff0c;点云Point Cloud&#xff0c;三角面片Mesh隐式&#xff1a;符号距离函数Signed Distance Funciton(SDF)&#xff0c;占用场Occupancy Field&#xff0c;神经辐射场Neural Radiance Field&#xff…

MAC在网络结构中的位置:深入解析

MAC在网络结构中的位置&#xff1a;深入解析 在网络通信的世界里&#xff0c;每一层都扮演着至关重要的角色。今天&#xff0c;我们将聚焦于一个经常被提到但可能不太被理解的概念&#xff1a;MAC&#xff08;Media Access Control&#xff0c;媒体访问控制&#xff09;。我们…

命名空间namespace--c++入门基础等

个人主页点这里~ 1.命名空间-namespace 简介 &#xff1a;在C/C中&#xff0c;变量、函数和后面要学到的类都是大量存在的&#xff0c;这些变量、函数和类的名称将都存在于全局作用域中&#xff0c;可能会导致很多冲突。使用命名空间的目的是对标识符的名称进行本地化&#xf…

echarts图表加载显示空白

数据请求了&#xff0c;图表加载显示空白 报错&#xff1a; Error: Initialize failed: invalid dom. at Object.init (echarts.js:2273:1) 方案 1. 通过this.$nexttick(()>{}) , 试过&#xff0c; 还是不行 2、把 this.lineChart2 this.$echarts.init(document.g…

EV代码签名-解决软件下载时风险警告

软件开发公司在发布软件后&#xff0c;用户尝试下载并安装软件时&#xff0c;如果被SmartScreen识别不常见或尚未建立起良好的信誉度&#xff0c;系统会发出警告&#xff0c;提示用户软件程序可能会对电脑构成风险&#xff0c;或者提示软件非正版软件&#xff0c;这有可能会造成…