web项目移动端在线预览(图片和txt文档)

最新推荐文章于 2024-09-12 08:28:17 发布

置顶西青程序猿

最新推荐文章于 2024-09-12 08:28:17 发布

阅读量1.5k

点赞数

分类专栏： java操作office 文章标签： java ios

本文链接：https://blog.csdn.net/catch_exception/article/details/105922516

版权

java操作office 专栏收录该内容

9 篇文章

订阅专栏

本项目中图片和txt文档不涉及加密

(一)txt格式在线预览

1.1 处理思路:定义一个空jsp页面,后台读取txt文本内容然后写会前台页面

1.2 前台页面

<%@page import="com.daorigin.law.Global"%>
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@taglib prefix="ifn" uri="/WEB-INF/tld/JSTLFunction.tld"%>
<!DOCTYPE html>
<html lang="en">
<head>
	<title>标题</title>
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no" />
    <style type="text/css">
       .titlediv{
        width:100%;
        height: 30px;
        /* background-color: grey; */
        margin-top: 8px;
        margin-left: 12px;
      }
      .small_title{
        border-left: 4px solid rgb(255, 174, 0);
        displiay: inline-block;
        width: 49%;
        margin: 0; 
        color: rgb(255, 174, 0);
        padding: 0 8px;
      }    
    </style>
</head>
  <% 
	String scheme=request.getScheme(); 
	String server=request.getServerName() + ":" + request.getServerPort(); 
	String staticServer = scheme + "://" + server;
	%> 
    <link href="<%=staticServer %>/static/css/reset.css" rel="stylesheet" type="text/css" >
	<link href="<%=staticServer %>/static/css/to_details.css" rel="stylesheet" type="text/css" >
<body>

	<span class="txt"></span>

    <script src="/static/js/ydmain.js"></script>
    <script src="/static/template/jQuery/jQuery-2.1.4.min.js"></script>
	<script src="/static/js/main.js"></script>
	
	<script type="text/javascript">
	$(function () {
		var objectId = "${param.objectId}";	
		//调用后台方法,获取txt文本内容
	    var url = '/law/common/file/txtDetail.htm?';
	    http.synchroAjax(url, {objectId:objectId},
     	    	function(data) {
				$('.txt').text(data.txt);
     	    	}); 
  
 
	});
	</script>
</body>

</html>

1.3 后台实现

                         //获取文件流
                        FileVO fileVO = this.facade.getFileService().loadObject(objectId, FileVO.class);
			URL url = new URL(Global.imgServer + "?file=" + fileVO.getFilePath() + "&name="
					+ URLEncoder.encode(fileVO.getFileName(), "utf-8"));
			HttpURLConnection conn = (HttpURLConnection) url.openConnection();
			DataInputStream input = new DataInputStream(conn.getInputStream());
			BufferedInputStream bis =  new BufferedInputStream(input);
			BufferedReader br = new BufferedReader(
			//这里需要制定编码格式,避免中文乱码
					new InputStreamReader(bis,"gbk"));
			String lineTxt = "";
			while ((lineTxt = br.readLine()) != null) {
				sb.append(lineTxt);
			}
			br.close();

(二) 图片在线预览

2.1 图片预览的思路和txt类似,定义一个空的jsp页面和一个img标签

<%@page import="com.daorigin.law.Global"%>
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@taglib prefix="ifn" uri="/WEB-INF/tld/JSTLFunction.tld"%>
<!DOCTYPE html>
<html lang="en">
<head>
	<title>标题</title>
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no" />
	<style type="text/css">
      html, body {
        height: 100%;
      }
      body {
        padding-top: 100px !important; 
      }
      img {
       display: block;
       max-width: 100%;
       margin: 0 auto;
       
      }
    </style>
</head>
  <% 
	String scheme=request.getScheme(); 
	String server=request.getServerName() + ":" + request.getServerPort(); 
	String staticServer = scheme + "://" + server;
	%> 
    <link href="<%=staticServer %>/static/css/reset.css" rel="stylesheet" type="text/css" >
	<link href="<%=staticServer %>/static/css/to_details.css" rel="stylesheet" type="text/css" >
<body>
<img id="headPic" src="" >

    <script src="/static/js/ydmain.js"></script>
    <script src="/static/template/jQuery/jQuery-2.1.4.min.js"></script>
	<script src="/static/js/main.js"></script>
	
	<script type="text/javascript">
	$(function () {
		var objectId = "${param.objectId}";	
	    var url = '/law/common/file/downloadOrDetail.htm?objectId='+objectId;
        var xhr = new XMLHttpRequest();
        xhr.open('GET',url, true);
        xhr.responseType = "blob";
        xhr.onload = function () {
            if (this.status == 200) {
                var blob = this.response;
                var img = document.createElement("img");
                img.onload = function (e) {
                    window.URL.revokeObjectURL(img.src);
                };
                img.src = window.URL.createObjectURL(blob);
                $("#headPic").attr("src",img.src);
            }
        }
        xhr.send();
	});
	</script>
</body>

</html>

2.2 后台实现

//判断文件格式
if(fileVO.getFileName().indexOf(".jpg") > -1||fileVO.getFileName().indexOf(".png") > -1
					||fileVO.getFileName().indexOf(".bmp") > -1||fileVO.getFileName().indexOf(".jpeg") > -1
					||fileVO.getFileName().indexOf(".gif") > -1) {
				BufferedInputStream fis = null;
				OutputStream os = null;
				try {
				        //获取文件流
					URL url = new URL(Global.imgServer + "?file=" + fileVO.getFilePath() + "&name="
							+ URLEncoder.encode(fileVO.getFileName(), "utf-8"));
					HttpURLConnection conn = (HttpURLConnection) url.openConnection();
					DataInputStream input = new DataInputStream(conn.getInputStream());
					fis =  new BufferedInputStream(input);
					os = response.getOutputStream();
					int count = 0;
					byte[] buffer = new byte[1024 * 8];
					//直接将图片以流的形式写回
					while ((count = fis.read(buffer)) != -1) {
						os.write(buffer, 0, count);
						os.flush();
					}
				} catch (Exception e) {
					e.printStackTrace();
				}
				try {
					fis.close();
					os.close();
				} catch (IOException e) {
					e.printStackTrace();
				}
			}